<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>员工行为排查工具移动端原型图</title>
    <link rel="stylesheet" href="https://weui.io/style/weui.min.css" />
    <style>
      body {
        margin: 0;
        padding: 20px;
        background-color: #f5f5f5;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }

      .prototype-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
        gap: 30px;
        padding: 30px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        min-height: 100vh;
        max-width: 1400px;
        margin: 0 auto;
        align-items: start;
      }

      .phone-frame {
        width: 375px;
        height: 812px;
        background: white;
        border-radius: 25px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        border: 3px solid #fff;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .phone-frame:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
      }

      /* 响应式设计 */
      @media (max-width: 1200px) {
        .prototype-container {
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: 25px;
          padding: 25px;
        }
      }

      @media (max-width: 768px) {
        .prototype-container {
          grid-template-columns: 1fr;
          gap: 20px;
          padding: 20px;
        }

        .phone-frame {
          width: 100%;
          max-width: 375px;
        }
      }

      .phone-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(255, 255, 255, 0.62);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 15px 20px;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        flex-shrink: 0;
        color: #333;
        border-bottom: 1px solid #f0f0f0;
      }

      .phone-content {
        padding: 20px;
        padding-bottom: 40px;
        flex: 1;
        overflow-y: auto;
      }

      .phone-header .back-btn {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #1aad19;
        font-size: 20px;
        cursor: pointer;
        padding: 5px;
      }

      .phone-header .title {
        font-weight: 600;
        color: #333;
      }

      .page-title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30px;
        color: #333;
      }

      .upload-section {
        margin-bottom: 30px;
      }

      .upload-item {
        background: #f8f8f8;
        border: 2px dashed #ddd;
        border-radius: 8px;
        padding: 20px;
        margin: 0 auto 15px auto;
        transition: all 0.3s;
        max-width: 300px;
        text-align: center;
      }

      .upload-item:hover {
        border-color: #1aad19;
        background: #f0f9f0;
      }

      .upload-header {
        text-align: center;
        margin-bottom: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .upload-icon {
        font-size: 48px;
        color: #1aad19;
        margin-bottom: 10px;
      }

      .upload-text {
        font-size: 16px;
        color: #333;
        margin-bottom: 5px;
        font-weight: 500;
      }

      .upload-desc {
        font-size: 14px;
        color: #666;
      }

      .upload-buttons {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        justify-content: center;
      }

      .btn-upload {
        flex: 2;
        background: #1aad19;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
      }

      .btn-upload:hover {
        background: #179b16;
        transform: translateY(-1px);
      }

      .btn-guide {
        flex: 1;
        background: #f0f0f0;
        color: #666;
        border: 1px solid #ddd;
        padding: 12px 16px;
        border-radius: 20px;
        font-size: 12px;
        cursor: pointer;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
      }

      .btn-guide:hover {
        background: #e8e8e8;
        color: #555;
      }

      /* 驳回原因提示区域样式 */
      .reject-notice {
        background: linear-gradient(135deg, #fff3e0, #ffe0b2);
        border: 2px solid #ff9800;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 20px;
        box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
      }

      .reject-title {
        font-size: 16px;
        font-weight: 600;
        color: #e65100;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .reject-content {
        background: white;
        border-radius: 8px;
        padding: 12px;
      }

      .reject-info {
        margin-bottom: 10px;
        line-height: 1.6;
      }

      .reject-label {
        font-weight: 600;
        color: #666;
        font-size: 14px;
      }

      .reject-text {
        color: #333;
        font-size: 14px;
      }

      .reject-meta {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #999;
        padding-top: 8px;
        border-top: 1px solid #f0f0f0;
      }

      /* 缺失材料高亮 */
      .upload-item.missing {
        border-color: #ff6b6b;
        background: #fff5f5;
      }

      .upload-item.missing .upload-text {
        color: #ff6b6b;
        font-weight: 600;
      }

      /* 已上传文件列表样式 */
      .uploaded-files {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #e0e0e0;
      }

      .uploaded-file-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f5f5f5;
        padding: 8px 12px;
        border-radius: 6px;
        margin-bottom: 8px;
      }

      .uploaded-file-item:last-child {
        margin-bottom: 0;
      }

      .file-name {
        font-size: 13px;
        color: #333;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .file-delete {
        font-size: 20px;
        color: #ff6b6b;
        cursor: pointer;
        padding: 0 8px;
        line-height: 1;
      }

      .file-delete:hover {
        color: #ff5252;
        transform: scale(1.2);
      }

      .status-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        margin-left: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
      }

      .status-analyzing {
        background: linear-gradient(135deg, #ffa726, #ff9800);
        color: white;
        box-shadow: 0 2px 8px rgba(255, 167, 38, 0.3);
      }

      .status-completed {
        background: linear-gradient(135deg, #4caf50, #2e7d32);
        color: white;
        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
      }

      .status-failed {
        background: linear-gradient(135deg, #ff6b6b, #e74c3c);
        color: white;
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
      }

      .status-analyzing:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 167, 38, 0.4);
      }

      .status-completed:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
      }

      .status-failed:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
      }

      .data-item {
        background: white;
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid #f0f0f0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }

      .data-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #1aad19, #2ecc71);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .data-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        border-color: #1aad19;
      }

      .data-item:hover::before {
        opacity: 1;
      }

      .data-item:last-child {
        margin-bottom: 0;
      }

      .data-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
      }

      .data-label {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        color: #333;
      }

      .data-label .employee-name {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        line-height: 1.2;
      }

      .data-label .employee-info {
        font-size: 13px;
        color: #666;
        line-height: 1.3;
      }

      .data-value {
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        min-width: 120px;
      }

      .data-value .status-badge {
        margin-bottom: 0;
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 12px;
        font-weight: 500;
        white-space: nowrap;
      }

      .data-value .score-info {
        font-size: 12px;
        color: #666;
        font-weight: 500;
        white-space: nowrap;
      }

      .data-value .time-info {
        font-size: 11px;
        color: #999;
        white-space: nowrap;
      }

      .data-icon {
        width: 32px;
        height: 32px;
        cursor: pointer;
        font-size: 16px;
        color: #999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        border: 2px solid #e9ecef;
        border-radius: 50%;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin-left: 16px;
        flex-shrink: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .data-icon:hover {
        background: linear-gradient(135deg, #e9ecef, #dee2e6);
        color: #666;
        border-color: #1aad19;
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }

      .data-icon:active {
        transform: scale(0.95);
      }

      .section-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin: 20px 0 15px 0;
        padding-bottom: 10px;
        border-bottom: 2px solid #1aad19;
      }

      .score-display {
        text-align: center;
        background: linear-gradient(135deg, #1aad19, #2ecc71);
        color: white;
        padding: 30px;
        border-radius: 15px;
        margin-bottom: 20px;
      }

      .score-number {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .score-label {
        font-size: 16px;
        opacity: 0.9;
      }

      .warning-level {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: bold;
        margin-top: 10px;
      }

      .warning-1 {
        background: #ffd700;
        color: #333;
      }

      .warning-2 {
        background: #ff8800;
        color: white;
      }

      .warning-3 {
        background: #ff4444;
        color: white;
      }

      .btn-submit {
        background: #1aad19;
        color: white;
        border: none;
        padding: 15px 30px;
        border-radius: 25px;
        font-size: 16px;
        font-weight: bold;
        width: 100%;
        cursor: pointer;
        margin-top: 20px;
        margin-bottom: 20px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(26, 173, 25, 0.3);
      }

      .btn-submit:hover {
        background: #179b16;
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(26, 173, 25, 0.4);
      }

      .btn-submit:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(26, 173, 25, 0.3);
      }

      .btn-secondary {
        background: #f0f0f0;
        color: #666;
        border: none;
        padding: 12px 24px;
        border-radius: 20px;
        font-size: 14px;
        margin-right: 10px;
        cursor: pointer;
        margin-bottom: 20px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .btn-secondary:hover {
        background: #e8e8e8;
        color: #555;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }

      .btn-secondary:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      /* 审批按钮专用样式 */
      .btn-approve {
        background: #1aad19;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 25px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(26, 173, 25, 0.3);
        flex: 1;
        margin-left: 5px;
      }

      .btn-approve:hover {
        background: #179b16;
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(26, 173, 25, 0.4);
      }

      .btn-approve:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(26, 173, 25, 0.3);
      }

      .btn-reject {
        background: #f0f0f0;
        color: #666;
        border: none;
        padding: 12px 24px;
        border-radius: 25px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        flex: 1;
        margin-right: 5px;
      }

      .btn-reject:hover {
        background: #e8e8e8;
        color: #555;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }

      .btn-reject:active {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      /* 按钮容器样式 */
      .button-container {
        display: flex;
        gap: 12px;
        margin-top: 24px;
        margin-bottom: 24px;
        align-items: center;
        padding: 0 4px;
      }

      .modal {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 20px 20px 0 0;
        padding: 20px;
        transform: translateY(100%);
        transition: transform 0.3s;
        z-index: 1000;
        max-height: 70vh;
        overflow-y: auto;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
      }

      .modal.show {
        transform: translateY(0);
      }

      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
      }

      .modal-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }

      .modal-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #999;
        cursor: pointer;
      }

      .detail-item {
        margin-bottom: 15px;
      }

      .detail-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
      }

      .detail-value {
        font-size: 16px;
        color: #333;
        background: #f8f8f8;
        padding: 10px;
        border-radius: 5px;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
        border-radius: 25px;
      }

      .overlay.show {
        display: block;
      }

      .guide-modal {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 20px 20px 0 0;
        padding: 20px;
        transform: translateY(100%);
        transition: transform 0.3s;
        z-index: 1000;
        max-height: 70vh;
        overflow-y: auto;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
      }

      .guide-modal.show {
        transform: translateY(0);
      }

      .guide-content {
        line-height: 1.6;
        color: #333;
      }

      .guide-step {
        margin-bottom: 15px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #1aad19;
      }

      .guide-step-title {
        font-weight: bold;
        color: #1aad19;
        margin-bottom: 5px;
      }

      .guide-step-desc {
        font-size: 14px;
        color: #666;
      }

      /* 授权相关样式 */
      .auth-notice {
        margin: 10px 0;
        text-align: center;
      }

      .auth-text {
        color: #1aad19;
        font-size: 14px;
        text-decoration: underline;
        cursor: pointer;
      }

      .auth-modal {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 20px 20px 0 0;
        padding: 20px;
        transform: translateY(100%);
        transition: transform 0.3s;
        z-index: 1000;
        max-height: 80vh;
        overflow-y: auto;
      }

      .auth-modal.show {
        transform: translateY(0);
      }

      .auth-content {
        line-height: 1.6;
        color: #333;
        margin-bottom: 20px;
      }

      .auth-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #333;
      }

      .auth-text-content {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 20px;
      }

      .auth-buttons {
        display: flex;
        gap: 10px;
        margin-top: 20px;
      }

      .btn-auth {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
      }

      .btn-auth-primary {
        background: #1aad19;
        color: white;
      }

      .btn-auth-secondary {
        background: #f0f0f0;
        color: #666;
      }

      /* 签字页面样式 */

      .signature-instructions {
        margin-bottom: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
      }

      .signature-instructions h3 {
        margin: 0 0 10px 0;
        font-size: 16px;
        color: #333;
      }

      .signature-instructions p {
        margin: 0;
        font-size: 14px;
        color: #666;
        line-height: 1.6;
      }

      .signature-canvas-container {
        border: 2px dashed #ddd;
        border-radius: 8px;
        margin-bottom: 20px;
        position: relative;
        background: #fafafa;
        height: 200px;
      }

      .signature-canvas {
        width: 100%;
        height: 200px;
        cursor: crosshair;
        border-radius: 6px;
      }

      .signature-placeholder {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #999;
        font-size: 14px;
        pointer-events: none;
      }

      .signature-buttons {
        display: flex;
        gap: 10px;
        margin-top: 20px;
      }

      .btn-signature {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
      }

      .btn-clear {
        background: #f0f0f0;
        color: #666;
      }

      .btn-confirm {
        background: #1aad19;
        color: white;
      }

      .analyzing-container {
        text-align: center;
        padding: 60px 20px;
        background: #f8f9fa;
        border-radius: 15px;
        margin: 20px 0;
      }

      .analyzing-icon {
        font-size: 64px;
        margin-bottom: 20px;
        animation: pulse 2s infinite;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
      }

      .analyzing-title {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
      }

      .analyzing-desc {
        font-size: 16px;
        color: #666;
        margin-bottom: 30px;
        line-height: 1.5;
      }

      .analyzing-progress {
        max-width: 300px;
        margin: 0 auto;
      }

      .progress-bar {
        width: 100%;
        height: 8px;
        background: #e0e0e0;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 10px;
      }

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #1aad19, #2ecc71);
        border-radius: 4px;
        animation: progress 5s ease-in-out infinite;
      }

      @keyframes progress {
        0% {
          width: 0%;
        }
        50% {
          width: 70%;
        }
        100% {
          width: 100%;
        }
      }

      .progress-text {
        font-size: 14px;
        color: #999;
      }

      .dropdown-container {
        position: relative;
        width: 100%;
      }

      .dropdown-trigger {
        height: 40px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 12px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #333;
      }

      .dropdown-trigger:hover {
        border-color: #1aad19;
        box-shadow: 0 2px 8px rgba(26, 173, 25, 0.2);
      }

      .dropdown-trigger.active {
        border-color: #1aad19;
        box-shadow: 0 2px 8px rgba(26, 173, 25, 0.2);
      }

      .dropdown-arrow {
        font-size: 12px;
        color: #666;
        transition: transform 0.3s;
      }

      .dropdown-trigger.active .dropdown-arrow {
        transform: rotate(180deg);
      }

      .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ddd;
        border-top: none;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
        display: none;
      }

      .dropdown-menu.show {
        display: block;
      }

      .dropdown-item {
        padding: 12px 16px;
        cursor: pointer;
        transition: background-color 0.2s;
        border-bottom: 1px solid #f0f0f0;
        color: #333;
      }

      .dropdown-item:last-child {
        border-bottom: none;
      }

      .dropdown-item:hover {
        background-color: #f8f9fa;
      }

      .dropdown-item.selected {
        background-color: #e8f5e8;
        color: #1aad19;
        font-weight: 500;
      }

      .employee-info-card {
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
        border-radius: 20px;
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .employee-info-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #1aad19, #2ecc71);
      }

      .employee-info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
        border-color: #1aad19;
      }

      .employee-info-card .employee-name {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
      }

      .employee-info-card .employee-details {
        font-size: 14px;
        color: #666;
        line-height: 1.4;
      }

      .employee-info-card .warning-level {
        padding: 6px 12px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <div class="prototype-container">
      <!-- 应用标题 -->
      <div
        style="
          grid-column: 1 / -1;
          text-align: center;
          margin-bottom: 30px;
          padding: 30px;
          background: rgba(255, 255, 255, 0.95);
          border-radius: 20px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(10px);
        "
      >
        <h1
          style="
            margin: 0;
            color: #333;
            font-size: 28px;
            font-weight: 700;
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          "
        >
          员工行为排查工具移动端原型图
        </h1>
        <p style="margin: 12px 0 0 0; color: #666; font-size: 16px; font-weight: 500">
          移动端功能页面展示
        </p>
      </div>
      <!-- 员工端功能页面组 -->
      <div style="grid-column: 1 / -1; margin: 20px 0 10px 0">
        <h2
          style="
            margin: 0;
            color: #495057;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          "
        >
          员工端功能页面
        </h2>
      </div>

      <!-- 资料上报页面 -->
      <div class="phone-frame">
        <div class="phone-header">
          <span class="back-btn">←</span>
          <span class="title">行为资料上报</span>
        </div>
        <div class="phone-content">
          <!-- 驳回原因提示区域（正常状态时不显示） -->
          <!-- <div class="reject-notice">
            <div class="reject-title">⚠️ 材料被驳回</div>
            <div class="reject-content">
              <div class="reject-info">
                <span class="reject-label">驳回原因：</span>
                <span class="reject-text">缺少行为报告和经营情况截图，请补充完整后重新提交</span>
              </div>
              <div class="reject-meta">
                <span>驳回时间：2025-10-11 14:30:25</span>
                <span>预审人：李四</span>
              </div>
            </div>
          </div> -->

          <div class="upload-section">
            <div class="upload-item">
              <div class="upload-header">
                <div class="upload-icon">📄</div>
                <div class="upload-text">征信报告申请回执上传</div>
                <div class="upload-desc">征信报告申请回执文件</div>
              </div>
              <div class="auth-notice">
                <span class="auth-text" onclick="showAuthModal()">请先阅读并同意授权说明</span>
              </div>
              <div class="upload-buttons">
                <button class="btn-guide" onclick="showGuideModal('credit', '1')">如何获取</button>
                <button class="btn-upload" onclick="checkAuthAndUpload('credit')">上传</button>
              </div>
            </div>

            <div class="upload-item">
              <div class="upload-header">
                <div class="upload-icon">📷</div>
                <div class="upload-text">无犯罪证明截图</div>
                <div class="upload-desc">无犯罪记录证明截图</div>
              </div>
              <div class="upload-buttons">
                <button class="btn-guide" onclick="showGuideModal('criminal', '1')">
                  如何获取
                </button>
                <button class="btn-upload" onclick="showUploadModal('criminal')">上传</button>
              </div>
            </div>

            <div class="upload-item">
              <div class="upload-header">
                <div class="upload-icon">📊</div>
                <div class="upload-text">经营情况截图</div>
                <div class="upload-desc">经营情况相关截图</div>
              </div>
              <div class="upload-buttons">
                <button class="btn-guide" onclick="showGuideModal('business', '1')">
                  如何获取
                </button>
                <button class="btn-upload" onclick="showUploadModal('business')">上传</button>
              </div>
            </div>

            <div class="upload-item">
              <div class="upload-header">
                <div class="upload-icon">📎</div>
                <div class="upload-text">补充说明材料（可选）</div>
                <div class="upload-desc">其他需要补充的说明材料</div>
              </div>
              <div class="upload-buttons">
                <button class="btn-upload" onclick="showUploadModal('supplement')">上传</button>
              </div>
              <!-- 已上传文件列表 -->
              <div class="uploaded-files" style="display: none">
                <div class="uploaded-file-item">
                  <span class="file-name">补充说明1.pdf</span>
                  <span class="file-delete" onclick="deleteFile(this)">×</span>
                </div>
              </div>
            </div>
          </div>
          <button class="btn-submit" onclick="submitData()">提交上报</button>
        </div>

        <!-- 如何获取弹窗 -->
        <div class="overlay" id="guideOverlay1" onclick="hideGuideModal('1')"></div>
        <div class="guide-modal" id="guideModal1">
          <div class="modal-header">
            <div class="modal-title" id="guideTitle1">如何获取征信资料</div>
            <button class="modal-close" onclick="hideGuideModal('1')">×</button>
          </div>
          <div class="guide-content" id="guideContent1">
            <!-- 内容将通过JavaScript动态填充 -->
          </div>
        </div>

        <!-- 授权说明弹窗 -->
        <div class="overlay" id="authOverlay" onclick="hideAuthModal()"></div>
        <div class="auth-modal" id="authModal">
          <div class="modal-header">
            <div class="modal-title">授权说明</div>
            <button class="modal-close" onclick="hideAuthModal()">×</button>
          </div>
          <div class="auth-content">
            <div class="auth-title">征信报告使用授权</div>
            <div class="auth-text-content">
              <p>为了进行员工行为排查，系统需要获取您的征信报告信息。请您仔细阅读以下授权说明：</p>
              <p>1. 授权范围：仅用于本次员工行为排查，不会用于其他用途</p>
              <p>2. 信息保护：您的个人信息将严格保密，仅限内部使用</p>
              <p>3. 使用期限：授权有效期为本次排查期间</p>
              <p>请点击下方"签字同意"按钮，进入签字页面完成授权确认。</p>
            </div>
            <div class="auth-buttons">
              <button class="btn-auth btn-auth-secondary" onclick="hideAuthModal()">取消</button>
              <button class="btn-auth btn-auth-primary" onclick="goToSignature()">签字同意</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 资料上报页面 - 被驳回状态 -->
      <div class="phone-frame">
        <div class="phone-header">
          <span class="back-btn">←</span>
          <span class="title">行为资料上报</span>
        </div>
        <div class="phone-content">
          <!-- 驳回原因提示区域 -->
          <div class="reject-notice">
            <div class="reject-title">⚠️ 材料被驳回</div>
            <div class="reject-content">
              <div class="reject-info">
                <span class="reject-label">驳回原因：</span>
                <span class="reject-text">缺少行为报告和经营情况截图，请补充完整后重新提交</span>
              </div>
              <div class="reject-meta">
                <span>驳回时间：2025-10-11 14:30:25</span>
                <span>预审人：李四</span>
              </div>
            </div>
          </div>

          <div class="upload-section">
            <div class="upload-item missing">
              <div class="upload-header">
                <div class="upload-icon">📄</div>
                <div class="upload-text">征信报告申请回执上传 ⚠️</div>
                <div class="upload-desc">征信报告申请回执文件</div>
              </div>
              <div class="upload-buttons">
                <button class="btn-guide" onclick="showGuideModal('credit', '2')">如何获取</button>
                <button class="btn-upload" onclick="checkAuthAndUpload('credit')">上传</button>
              </div>
            </div>

            <div class="upload-item">
              <div class="upload-header">
                <div class="upload-icon">📷</div>
                <div class="upload-text">无犯罪证明截图</div>
                <div class="upload-desc">无犯罪记录证明截图</div>
              </div>
              <div class="upload-buttons">
                <button class="btn-guide" onclick="showGuideModal('criminal', '2')">
                  如何获取
                </button>
                <button class="btn-upload" onclick="showUploadModal('criminal')">上传</button>
              </div>
              <div
                class="upload-status"
                style="margin-top: 10px; color: #1aad19; font-size: 13px; text-align: center"
              >
                ✓ 已上传：无犯罪证明.jpg
              </div>
            </div>

            <div class="upload-item missing">
              <div class="upload-header">
                <div class="upload-icon">📊</div>
                <div class="upload-text">经营情况截图 ⚠️</div>
                <div class="upload-desc">经营情况相关截图</div>
              </div>
              <div class="upload-buttons">
                <button class="btn-guide" onclick="showGuideModal('business', '2')">
                  如何获取
                </button>
                <button class="btn-upload" onclick="showUploadModal('business')">上传</button>
              </div>
            </div>

            <div class="upload-item">
              <div class="upload-header">
                <div class="upload-icon">📎</div>
                <div class="upload-text">补充说明材料（可选）</div>
                <div class="upload-desc">其他需要补充的说明材料</div>
              </div>
              <div class="upload-buttons">
                <button class="btn-upload" onclick="showUploadModal('supplement')">上传</button>
              </div>
              <!-- 已上传文件列表 -->
              <div class="uploaded-files">
                <div class="uploaded-file-item">
                  <span class="file-name">补充说明材料1.pdf</span>
                  <span class="file-delete" onclick="deleteFile(this)">×</span>
                </div>
                <div class="uploaded-file-item">
                  <span class="file-name">情况说明.docx</span>
                  <span class="file-delete" onclick="deleteFile(this)">×</span>
                </div>
              </div>
            </div>
          </div>

          <button class="btn-submit" onclick="submitData()">重新提交</button>

          <!-- 如何获取弹窗 -->
          <div class="overlay" id="guideOverlay2" onclick="hideGuideModal('2')"></div>
          <div class="guide-modal" id="guideModal2">
            <div class="modal-header">
              <div class="modal-title" id="guideTitle2">如何获取征信资料</div>
              <button class="modal-close" onclick="hideGuideModal('2')">×</button>
            </div>
            <div class="guide-content" id="guideContent2">
              <!-- 内容将通过JavaScript动态填充 -->
            </div>
          </div>
        </div>

        <!-- 授权说明弹窗 -->
        <div class="overlay" id="authOverlay2" onclick="hideAuthModal()"></div>
        <div class="auth-modal" id="authModal2">
          <div class="modal-header">
            <div class="modal-title">授权说明</div>
            <button class="modal-close" onclick="hideAuthModal()">×</button>
          </div>
          <div class="auth-content">
            <div class="auth-title">征信报告使用授权</div>
            <div class="auth-text-content">
              <p>为了进行员工行为排查，系统需要获取您的征信报告信息。请您仔细阅读以下授权说明：</p>
              <p>1. 授权范围：仅用于本次员工行为排查，不会用于其他用途</p>
              <p>2. 信息保护：您的个人信息将严格保密，仅限内部使用</p>
              <p>3. 使用期限：授权有效期为本次排查期间</p>
              <p>4. 您的权利：您有权随时撤回授权</p>
              <p>请点击下方"签字同意"按钮，进入签字页面完成授权确认。</p>
            </div>
            <div class="auth-buttons">
              <button class="btn-auth btn-auth-secondary" onclick="hideAuthModal()">取消</button>
              <button class="btn-auth btn-auth-primary" onclick="goToSignature()">签字同意</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 签字页面 -->
      <div class="phone-frame">
        <div class="phone-header">
          <span class="back-btn" onclick="hideSignaturePage()">←</span>
          <span class="title">授权签字确认</span>
        </div>
        <div class="phone-content">
          <div class="signature-instructions">
            <h3>签字说明</h3>
            <p>请在下方签名区域进行签字，确认您已阅读并同意授权说明。</p>
          </div>
          <div class="signature-canvas-container">
            <canvas class="signature-canvas" id="signatureCanvas"></canvas>
            <div class="signature-placeholder" id="signaturePlaceholder">请在此处签字</div>
          </div>
          <div class="signature-buttons">
            <button class="btn-signature btn-clear" onclick="clearSignature()">清除</button>
            <button class="btn-signature btn-confirm" onclick="confirmSignature()">确认签字</button>
          </div>
        </div>
      </div>

      <!-- 分析中页面 - 步骤条展示 -->
      <div class="phone-frame">
        <div class="phone-header">
          <span class="back-btn">←</span>
          <span class="title">行为分析结果</span>
        </div>
        <div class="phone-content">
          <!-- 步骤条区域 -->
          <div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                margin-bottom: 40px;
              "
            >
              <!-- 连接线 -->
              <div
                style="
                  position: absolute;
                  top: 16px;
                  left: 15%;
                  right: 15%;
                  height: 2px;
                  background: linear-gradient(
                    to right,
                    #1aad19 0%,
                    #1aad19 50%,
                    #ddd 50%,
                    #ddd 100%
                  );
                  z-index: 0;
                "
              ></div>

              <!-- 步骤1: 资料提交 -->
              <div
                style="
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  position: relative;
                  z-index: 1;
                "
              >
                <div
                  style="
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    background: #1aad19;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: 8px;
                  "
                >
                  ✓
                </div>
                <div style="font-size: 13px; color: #1aad19; font-weight: 500; text-align: center">
                  资料提交
                </div>
                <div style="font-size: 11px; color: #999; margin-top: 4px; text-align: center">
                  10-11 09:30
                </div>
              </div>

              <!-- 步骤2: 综合员预审 -->
              <div
                style="
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  position: relative;
                  z-index: 1;
                "
              >
                <div
                  style="
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    background: #4a90e2;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-size: 14px;
                    font-weight: bold;
                    margin-bottom: 8px;
                    animation: pulse 2s infinite;
                    box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.7);
                  "
                >
                  ●
                </div>
                <div style="font-size: 13px; color: #4a90e2; font-weight: 500; text-align: center">
                  综合员预审
                </div>
                <div style="font-size: 11px; color: #4a90e2; margin-top: 4px; text-align: center">
                  进行中
                </div>
              </div>

              <!-- 步骤3: 人力部审核 -->
              <div
                style="
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  position: relative;
                  z-index: 1;
                "
              >
                <div
                  style="
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    background: #ddd;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-size: 14px;
                    font-weight: bold;
                    margin-bottom: 8px;
                  "
                >
                  ●
                </div>
                <div style="font-size: 13px; color: #999; font-weight: 500; text-align: center">
                  申报完成
                </div>
                <div style="font-size: 11px; color: #999; margin-top: 4px; text-align: center">
                  待处理
                </div>
              </div>
            </div>

            <!-- 步骤说明区域 -->
            <div
              style="
                background: linear-gradient(135deg, #f8f9fa, #e9ecef);
                border-radius: 12px;
                padding: 20px;
                margin-bottom: 20px;
              "
            >
              <div
                style="
                  font-size: 16px;
                  font-weight: 600;
                  color: #333;
                  margin-bottom: 12px;
                  display: flex;
                  align-items: center;
                "
              >
                <span
                  style="
                    width: 4px;
                    height: 16px;
                    background: #4a90e2;
                    margin-right: 8px;
                    border-radius: 2px;
                  "
                ></span>
                当前步骤：综合员预审
              </div>
              <div style="font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 12px">
                综合员正在对您提交的材料进行完整性预审，确认材料齐全后将提交系统进行自动分析。
              </div>
              <div style="font-size: 13px; color: #999; display: flex; align-items: center">
                <span style="margin-right: 4px">⏱</span>
                预计处理时间：1-2个工作日
              </div>
            </div>

            <!-- 温馨提示区域 -->
            <div
              style="
                background: #fff3e0;
                border-left: 4px solid #ff9800;
                border-radius: 8px;
                padding: 16px;
                margin-bottom: 20px;
              "
            >
              <div style="font-size: 14px; font-weight: 600; color: #e65100; margin-bottom: 8px">
                💡 温馨提示
              </div>
              <div style="font-size: 13px; color: #666; line-height: 1.6">
                • 材料预审通过后，系统将自动进行分析
                <br />
                • 如材料不完整，综合员会通知您补充材料
                <br />
                • 请保持手机畅通，及时查看消息通知
              </div>
            </div>

            <!-- 时间线详情 -->
            <div
              style="
                background: white;
                border-radius: 12px;
                padding: 20px;
                border: 1px solid #e0e0e0;
              "
            >
              <div style="font-size: 15px; font-weight: 600; color: #333; margin-bottom: 16px">
                处理记录
              </div>
              <div style="position: relative; padding-left: 24px">
                <!-- 时间线竖线 -->
                <div
                  style="
                    position: absolute;
                    left: 4px;
                    top: 8px;
                    bottom: 8px;
                    width: 2px;
                    background: #e0e0e0;
                  "
                ></div>

                <!-- 记录1 -->
                <div style="position: relative; margin-bottom: 16px">
                  <div
                    style="
                      position: absolute;
                      left: -20px;
                      top: 4px;
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background: #1aad19;
                    "
                  ></div>
                  <div style="font-size: 13px; color: #333; font-weight: 500">资料提交成功</div>
                  <div style="font-size: 12px; color: #999; margin-top: 2px">
                    2025-10-11 09:30:25
                  </div>
                  <div style="font-size: 12px; color: #666; margin-top: 4px">
                    已提交行为报告、无犯罪证明、经营情况截图
                  </div>
                </div>

                <!-- 记录2 -->
                <div style="position: relative">
                  <div
                    style="
                      position: absolute;
                      left: -20px;
                      top: 4px;
                      width: 8px;
                      height: 8px;
                      border-radius: 50%;
                      background: #4a90e2;
                    "
                  ></div>
                  <div style="font-size: 13px; color: #333; font-weight: 500">待综合员预审</div>
                  <div style="font-size: 12px; color: #999; margin-top: 2px">等待处理中...</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分析结果页面 - 当前用户自己查看 -->
      <div class="phone-frame">
        <div class="phone-header">
          <span class="back-btn">←</span>
          <span class="title">行为分析结果</span>
        </div>
        <div class="phone-content">
          <!-- 员工信息区域 -->
          <div class="employee-info-card">
            <div class="employee-name">张三</div>
            <div class="employee-details">工号：12345678 | 风险管理部</div>
          </div>

          <!-- 评分概览区域 -->
          <div class="score-display">
            <div class="score-number">65</div>
            <div class="score-label">行为分数</div>
            <div style="font-size: 12px; color: rgba(255, 255, 255, 0.8); margin-top: 8px">
              排查批次：2025年10月
            </div>
            <div class="warning-level warning-1">一级预警</div>
          </div>

          <!-- 异常提醒区域 -->
          <div class="section-title">异常提醒</div>
          <div
            class="data-item"
            onclick="showAbnormalDetailModal('credit-limit', 'abnormalModal2', 'abnormalOverlay2')"
          >
            <div class="data-label">信用卡已使用额度</div>
            <div class="data-value" style="color: #ff6b6b; font-weight: bold">80,000元</div>
            <div class="data-icon" style="color: #ff6b6b">?</div>
          </div>
          <div
            class="data-item"
            onclick="showAbnormalDetailModal('overdue-accounts', 'abnormalModal2', 'abnormalOverlay2')"
          >
            <div class="data-label">逾期账户数</div>
            <div class="data-value" style="color: #ff6b6b; font-weight: bold">2个</div>
            <div class="data-icon" style="color: #ff6b6b">?</div>
          </div>
          <div
            class="data-item"
            onclick="showAbnormalDetailModal('credit-increase', 'abnormalModal2', 'abnormalOverlay2')"
          >
            <div class="data-label">相较上一期信用卡账户增加数</div>
            <div class="data-value" style="color: #ff6b6b; font-weight: bold">+3个</div>
            <div class="data-icon" style="color: #ff6b6b">?</div>
          </div>

          <!-- 异常提醒详情弹窗 -->
          <div
            class="overlay"
            id="abnormalOverlay2"
            onclick="hideAbnormalDetailModal('abnormalModal2', 'abnormalOverlay2')"
          ></div>
          <div class="modal" id="abnormalModal2">
            <div class="modal-header">
              <div class="modal-title">异常提醒详情</div>
              <button
                class="modal-close"
                onclick="hideAbnormalDetailModal('abnormalModal2', 'abnormalOverlay2')"
              >
                ×
              </button>
            </div>
            <div class="detail-item">
              <div class="detail-label">排查项名称</div>
              <div class="detail-value" id="abnormal-name2">信用卡已使用额度</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">异常原因</div>
              <div
                class="detail-value"
                id="abnormal-reason2"
                style="color: #ff6b6b; font-weight: bold"
              >
                使用额度超过标准值
              </div>
            </div>
            <div class="detail-item">
              <div class="detail-label">原始信息</div>
              <div class="detail-value" id="abnormal-original2">
                征信报告申请回执第2页第20行"已使用额度：80,000元"
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 预审管理页面（已隐藏） -->
      <div class="phone-frame" style="display: none">
        <div class="phone-header">
          <span class="back-btn">←</span>
          <span class="title">预审管理（已作废）</span>
        </div>
        <div class="phone-content">
          <!-- 筛选标签区域 -->
          <div style="margin-bottom: 20px">
            <div
              style="
                display: flex;
                gap: 20px;
                padding: 0 4px;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
              "
            >
              <div
                class="filter-tab active"
                data-filter="all"
                onclick="filterList('all', this)"
                style="
                  padding: 8px 0;
                  font-size: 16px;
                  color: #2196f3;
                  border-bottom: 2px solid #2196f3;
                  cursor: pointer;
                  font-weight: 500;
                  white-space: nowrap;
                  flex-shrink: 0;
                "
              >
                全部
              </div>
              <div
                class="filter-tab"
                data-filter="pending"
                onclick="filterList('pending', this)"
                style="
                  padding: 8px 0;
                  font-size: 16px;
                  color: #333;
                  border-bottom: 2px solid transparent;
                  cursor: pointer;
                  font-weight: 400;
                  white-space: nowrap;
                  flex-shrink: 0;
                "
              >
                待预审(8)
              </div>
              <div
                class="filter-tab"
                data-filter="pendingSubmit"
                onclick="filterList('pendingSubmit', this)"
                style="
                  padding: 8px 0;
                  font-size: 16px;
                  color: #333;
                  border-bottom: 2px solid transparent;
                  cursor: pointer;
                  font-weight: 400;
                  white-space: nowrap;
                  flex-shrink: 0;
                "
              >
                待提交(5)
              </div>
              <div
                class="filter-tab"
                data-filter="submitted"
                onclick="filterList('submitted', this)"
                style="
                  padding: 8px 0;
                  font-size: 16px;
                  color: #333;
                  border-bottom: 2px solid transparent;
                  cursor: pointer;
                  font-weight: 400;
                  white-space: nowrap;
                  flex-shrink: 0;
                "
              >
                已提交(12)
              </div>
              <div
                class="filter-tab"
                data-filter="rejected"
                onclick="filterList('rejected', this)"
                style="
                  padding: 8px 0;
                  font-size: 16px;
                  color: #333;
                  border-bottom: 2px solid transparent;
                  cursor: pointer;
                  font-weight: 400;
                  white-space: nowrap;
                  flex-shrink: 0;
                "
              >
                已驳回(3)
              </div>
            </div>
          </div>

          <!-- 列表区域 -->
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 20px;
            "
          >
            <div class="section-title" id="listTitle" style="margin: 0; flex: 1">全部列表</div>

            <!-- 全部提交按钮（仅待提交状态显示） -->
            <div id="batchSubmitBtn" style="display: none; margin-left: 16px">
              <button
                style="
                  background: linear-gradient(135deg, #2196f3, #1976d2);
                  color: white;
                  border: none;
                  padding: 8px 16px;
                  border-radius: 6px;
                  font-size: 14px;
                  font-weight: 500;
                  cursor: pointer;
                  box-shadow: 0 2px 6px rgba(33, 150, 243, 0.3);
                  transition: all 0.3s ease;
                  white-space: nowrap;
                "
                onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 3px 8px rgba(33, 150, 243, 0.4)'"
                onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 6px rgba(33, 150, 243, 0.3)'"
                onclick="batchSubmitAll()"
              >
                全部提交
              </button>
            </div>
          </div>
          <div class="data-item" data-status="pending" onclick="goToReviewDetail('emp001')">
            <div class="data-label">
              <div class="employee-name">张三</div>
              <div class="employee-info">
                工号：12345678
                <br />
                风险管理部
              </div>
            </div>
            <div class="data-value">
              <div class="status-badge status-failed" style="background: #ff4444; color: white">
                待预审
              </div>
              <div class="score-info">材料完整</div>
              <div class="time-info">2024-09-22 14:30</div>
            </div>
          </div>

          <div class="data-item" data-status="pendingSubmit" onclick="goToReviewDetail('emp002')">
            <div class="data-label">
              <div class="employee-name">李四</div>
              <div class="employee-info">
                工号：87654321
                <br />
                信贷管理部
              </div>
            </div>
            <div class="data-value">
              <div class="status-badge status-analyzing" style="background: #2196f3; color: white">
                待提交
              </div>
              <div class="score-info">预审完成</div>
              <div class="time-info">2024-09-22 13:45</div>
            </div>
          </div>

          <div class="data-item" data-status="submitted" onclick="goToReviewDetail('emp003')">
            <div class="data-label">
              <div class="employee-name">王五</div>
              <div class="employee-info">
                工号：11223344
                <br />
                运营管理部
              </div>
            </div>
            <div class="data-value">
              <div class="status-badge status-completed" style="background: #4caf50; color: white">
                已提交
              </div>
              <div class="score-info">已提交人力部</div>
              <div class="time-info">2024-09-22 12:20</div>
            </div>
          </div>

          <div class="data-item" data-status="rejected" onclick="goToReviewDetail('emp004')">
            <div class="data-label">
              <div class="employee-name">赵六</div>
              <div class="employee-info">
                工号：55667788
                <br />
                风险管理部
              </div>
            </div>
            <div class="data-value">
              <div class="status-badge status-failed" style="background: #ff8800; color: white">
                已驳回
              </div>
              <div class="score-info">材料缺失</div>
              <div class="time-info">2024-09-22 11:15</div>
            </div>
          </div>

          <div class="data-item" data-status="pending" onclick="goToReviewDetail('emp005')">
            <div class="data-label">
              <div class="employee-name">孙七</div>
              <div class="employee-info">
                工号：99887766
                <br />
                信贷管理部
              </div>
            </div>
            <div class="data-value">
              <div class="status-badge status-analyzing" style="background: #ff4444; color: white">
                待预审
              </div>
              <div class="score-info">材料完整</div>
              <div class="time-info">2024-09-22 10:30</div>
            </div>
          </div>

          <!-- 更多示例数据 -->
          <div class="data-item" data-status="pendingSubmit" onclick="goToReviewDetail('emp006')">
            <div class="data-label">
              <div class="employee-name">周八</div>
              <div class="employee-info">
                工号：44556677
                <br />
                客户服务部
              </div>
            </div>
            <div class="data-value">
              <div class="status-badge status-analyzing" style="background: #2196f3; color: white">
                待提交
              </div>
              <div class="score-info">预审完成</div>
              <div class="time-info">2024-09-22 09:45</div>
            </div>
          </div>

          <div class="data-item" data-status="submitted" onclick="goToReviewDetail('emp007')">
            <div class="data-label">
              <div class="employee-name">吴九</div>
              <div class="employee-info">
                工号：33445566
                <br />
                财务管理部
              </div>
            </div>
            <div class="data-value">
              <div class="status-badge status-completed" style="background: #4caf50; color: white">
                已提交
              </div>
              <div class="score-info">已提交人力部</div>
              <div class="time-info">2024-09-22 08:30</div>
            </div>
          </div>

          <div class="data-item" data-status="pending" onclick="goToReviewDetail('emp008')">
            <div class="data-label">
              <div class="employee-name">郑十</div>
              <div class="employee-info">
                工号：22334455
                <br />
                信息技术部
              </div>
            </div>
            <div class="data-value">
              <div class="status-badge status-failed" style="background: #ff4444; color: white">
                待预审
              </div>
              <div class="score-info">材料不完整</div>
              <div class="time-info">2024-09-22 07:15</div>
            </div>
          </div>

          <!-- 预审详情弹窗 -->
          <div class="overlay" id="reviewOverlay" onclick="hideReviewDetail()"></div>
          <div class="modal" id="reviewDetailModal">
            <div class="modal-header">
              <div class="modal-title">预审详情</div>
              <button class="modal-close" onclick="hideReviewDetail()">×</button>
            </div>
            <div class="detail-item">
              <div class="detail-label">员工信息</div>
              <div class="detail-value">张三 | 工号：12345678 | 风险管理部</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">预审状态</div>
              <div class="detail-value" style="color: #ff6b6b; font-weight: bold">待预审</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">材料状态</div>
              <div class="detail-value">材料完整</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">上传资料</div>
              <div class="detail-value">
                <div
                  style="
                    margin-bottom: 10px;
                    padding: 10px;
                    background: #f0f8f0;
                    border-radius: 5px;
                    border-left: 4px solid #4caf50;
                  "
                >
                  <div style="font-weight: bold; color: #4caf50">✓ 征信报告申请回执</div>
                  <div style="font-size: 12px; color: #666">已上传 | 1.2MB | PDF格式</div>
                </div>
                <div
                  style="
                    margin-bottom: 10px;
                    padding: 10px;
                    background: #f0f8f0;
                    border-radius: 5px;
                    border-left: 4px solid #4caf50;
                  "
                >
                  <div style="font-weight: bold; color: #4caf50">✓ 无犯罪记录证明</div>
                  <div style="font-size: 12px; color: #666">已上传 | 856KB | JPG格式</div>
                </div>
                <div
                  style="
                    margin-bottom: 10px;
                    padding: 10px;
                    background: #f0f8f0;
                    border-radius: 5px;
                    border-left: 4px solid #4caf50;
                  "
                >
                  <div style="font-weight: bold; color: #4caf50">✓ 经营情况截图</div>
                  <div style="font-size: 12px; color: #666">已上传 | 1.5MB | PNG格式</div>
                </div>
                <div
                  style="
                    padding: 10px;
                    background: #f0f8f0;
                    border-radius: 5px;
                    border-left: 4px solid #4caf50;
                  "
                >
                  <div style="font-weight: bold; color: #4caf50">✓ 补充说明材料</div>
                  <div style="font-size: 12px; color: #666">已上传 | 2.1MB | DOCX格式</div>
                </div>
              </div>
            </div>
            <div class="detail-item">
              <div class="detail-label">预审意见</div>
              <div class="detail-value">
                <textarea
                  placeholder="请输入预审意见..."
                  style="
                    width: 100%;
                    min-height: 60px;
                    padding: 8px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    resize: vertical;
                  "
                ></textarea>
              </div>
            </div>
            <div class="button-container">
              <button class="btn-confirm" onclick="confirmReview()">确定</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 预审详情页面 -->
      <div class="phone-frame" id="reviewDetailPage" style="display: none">
        <div class="phone-header">
          <span class="back-btn" onclick="goBackToReviewList()">←</span>
          <span class="title">预审详情</span>
        </div>
        <div class="phone-content" style="overflow-y: auto; height: 740px; padding-bottom: 20px">
          <!-- 员工信息区域 -->
          <div
            style="
              background: white;
              border-radius: 12px;
              margin-bottom: 15px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              overflow: hidden;
            "
          >
            <div style="background: #4caf50; height: 4px; width: 100%"></div>
            <div style="padding: 15px">
              <div style="font-size: 18px; font-weight: bold; margin-bottom: 8px">张三</div>
              <div style="font-size: 14px; color: #666">工号：12345678 | 风险管理部</div>
            </div>
          </div>

          <!-- 上传资料审核区域 -->
          <div style="padding-top: 15px">
            <div style="font-size: 16px; font-weight: bold; margin-bottom: 15px">上传资料审核</div>

            <!-- 征信报告 -->
            <div
              style="
                margin-bottom: 20px;
                padding: 16px;
                border: 1px solid #e0e0e0;
                border-radius: 12px;
                background: #fafafa;
              "
            >
              <!-- 资料标题和查看按钮 -->
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 12px;
                "
              >
                <div style="font-weight: bold; font-size: 16px; color: #333">征信报告申请回执</div>
                <button
                  onclick="viewOriginalFile('credit-report.pdf')"
                  style="
                    background: linear-gradient(135deg, #2196f3, #1976d2);
                    color: white;
                    border: none;
                    padding: 8px 16px;
                    border-radius: 6px;
                    font-size: 14px;
                    cursor: pointer;
                    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
                    transition: all 0.3s ease;
                  "
                  onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 3px 6px rgba(33, 150, 243, 0.4)'"
                  onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(33, 150, 243, 0.3)'"
                >
                  查看文件
                </button>
              </div>

              <!-- 文件信息 -->
              <div
                style="
                  font-size: 13px;
                  color: #666;
                  margin-bottom: 16px;
                  padding: 8px 12px;
                  background: white;
                  border-radius: 6px;
                  border: 1px solid #e8e8e8;
                "
              >
                已上传 | 1.2MB | PDF格式
              </div>

              <!-- 审核操作区域 -->
              <div style="margin-bottom: 16px">
                <div style="font-size: 14px; font-weight: 500; margin-bottom: 12px; color: #333">
                  审核结果
                </div>
                <div style="display: flex; gap: 20px">
                  <label
                    style="
                      display: flex;
                      align-items: center;
                      font-size: 16px;
                      cursor: pointer;
                      padding: 12px 16px;
                      border-radius: 8px;
                      background: white;
                      border: 2px solid #e8e8e8;
                      transition: all 0.3s ease;
                      min-width: 80px;
                      justify-content: center;
                    "
                    onmouseover="this.style.borderColor='#4caf50'; this.style.background='#f8fff8'"
                    onmouseout="this.style.borderColor='#e8e8e8'; this.style.background='white'"
                  >
                    <input
                      type="radio"
                      name="credit-report"
                      value="pass"
                      style="margin-right: 8px; transform: scale(1.2)"
                      onchange="this.parentElement.style.borderColor='#4caf50'; this.parentElement.style.background='#f8fff8'"
                    />
                    通过
                  </label>
                  <label
                    style="
                      display: flex;
                      align-items: center;
                      font-size: 16px;
                      cursor: pointer;
                      padding: 12px 16px;
                      border-radius: 8px;
                      background: white;
                      border: 2px solid #e8e8e8;
                      transition: all 0.3s ease;
                      min-width: 80px;
                      justify-content: center;
                    "
                    onmouseover="this.style.borderColor='#f44336'; this.style.background='#fff8f8'"
                    onmouseout="this.style.borderColor='#e8e8e8'; this.style.background='white'"
                  >
                    <input
                      type="radio"
                      name="credit-report"
                      value="fail"
                      style="margin-right: 8px; transform: scale(1.2)"
                      onchange="this.parentElement.style.borderColor='#f44336'; this.parentElement.style.background='#fff8f8'"
                    />
                    不通过
                  </label>
                </div>
              </div>

              <!-- 备注输入区域 -->
              <div>
                <div style="font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #333">
                  备注信息
                </div>
                <textarea
                  placeholder="请输入备注信息..."
                  style="
                    width: calc(100% - 16px);
                    min-height: 60px;
                    padding: 12px;
                    border: 2px solid #e8e8e8;
                    border-radius: 8px;
                    resize: vertical;
                    font-size: 14px;
                    box-sizing: border-box;
                    transition: border-color 0.3s ease;
                  "
                  onfocus="this.style.borderColor='#2196f3'"
                  onblur="this.style.borderColor='#e8e8e8'"
                ></textarea>
              </div>
            </div>

            <!-- 无犯罪记录证明 -->
            <div
              style="
                margin-bottom: 20px;
                padding: 16px;
                border: 1px solid #e0e0e0;
                border-radius: 12px;
                background: #fafafa;
              "
            >
              <!-- 资料标题和查看按钮 -->
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 12px;
                "
              >
                <div style="font-weight: bold; font-size: 16px; color: #333">无犯罪记录证明</div>
                <button
                  onclick="viewOriginalFile('criminal-record.jpg')"
                  style="
                    background: linear-gradient(135deg, #2196f3, #1976d2);
                    color: white;
                    border: none;
                    padding: 8px 16px;
                    border-radius: 6px;
                    font-size: 14px;
                    cursor: pointer;
                    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
                    transition: all 0.3s ease;
                  "
                  onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 3px 6px rgba(33, 150, 243, 0.4)'"
                  onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(33, 150, 243, 0.3)'"
                >
                  查看文件
                </button>
              </div>

              <!-- 文件信息 -->
              <div
                style="
                  font-size: 13px;
                  color: #666;
                  margin-bottom: 16px;
                  padding: 8px 12px;
                  background: white;
                  border-radius: 6px;
                  border: 1px solid #e8e8e8;
                "
              >
                已上传 | 856KB | JPG格式
              </div>

              <!-- 审核操作区域 -->
              <div style="margin-bottom: 16px">
                <div style="font-size: 14px; font-weight: 500; margin-bottom: 12px; color: #333">
                  审核结果
                </div>
                <div style="display: flex; gap: 20px">
                  <label
                    style="
                      display: flex;
                      align-items: center;
                      font-size: 16px;
                      cursor: pointer;
                      padding: 12px 16px;
                      border-radius: 8px;
                      background: white;
                      border: 2px solid #e8e8e8;
                      transition: all 0.3s ease;
                      min-width: 80px;
                      justify-content: center;
                    "
                    onmouseover="this.style.borderColor='#4caf50'; this.style.background='#f8fff8'"
                    onmouseout="this.style.borderColor='#e8e8e8'; this.style.background='white'"
                  >
                    <input
                      type="radio"
                      name="criminal-record"
                      value="pass"
                      style="margin-right: 8px; transform: scale(1.2)"
                      onchange="this.parentElement.style.borderColor='#4caf50'; this.parentElement.style.background='#f8fff8'"
                    />
                    通过
                  </label>
                  <label
                    style="
                      display: flex;
                      align-items: center;
                      font-size: 16px;
                      cursor: pointer;
                      padding: 12px 16px;
                      border-radius: 8px;
                      background: white;
                      border: 2px solid #e8e8e8;
                      transition: all 0.3s ease;
                      min-width: 80px;
                      justify-content: center;
                    "
                    onmouseover="this.style.borderColor='#f44336'; this.style.background='#fff8f8'"
                    onmouseout="this.style.borderColor='#e8e8e8'; this.style.background='white'"
                  >
                    <input
                      type="radio"
                      name="criminal-record"
                      value="fail"
                      style="margin-right: 8px; transform: scale(1.2)"
                      onchange="this.parentElement.style.borderColor='#f44336'; this.parentElement.style.background='#fff8f8'"
                    />
                    不通过
                  </label>
                </div>
              </div>

              <!-- 备注输入区域 -->
              <div>
                <div style="font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #333">
                  备注信息
                </div>
                <textarea
                  placeholder="请输入备注信息..."
                  style="
                    width: calc(100% - 16px);
                    min-height: 60px;
                    padding: 12px;
                    border: 2px solid #e8e8e8;
                    border-radius: 8px;
                    resize: vertical;
                    font-size: 14px;
                    box-sizing: border-box;
                    transition: border-color 0.3s ease;
                  "
                  onfocus="this.style.borderColor='#2196f3'"
                  onblur="this.style.borderColor='#e8e8e8'"
                ></textarea>
              </div>
            </div>

            <!-- 经营情况截图 -->
            <div
              style="
                margin-bottom: 20px;
                padding: 16px;
                border: 1px solid #e0e0e0;
                border-radius: 12px;
                background: #fafafa;
              "
            >
              <!-- 资料标题和查看按钮 -->
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 12px;
                "
              >
                <div style="font-weight: bold; font-size: 16px; color: #333">经营情况截图</div>
                <button
                  onclick="viewOriginalFile('business-status.png')"
                  style="
                    background: linear-gradient(135deg, #2196f3, #1976d2);
                    color: white;
                    border: none;
                    padding: 8px 16px;
                    border-radius: 6px;
                    font-size: 14px;
                    cursor: pointer;
                    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
                    transition: all 0.3s ease;
                  "
                  onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 3px 6px rgba(33, 150, 243, 0.4)'"
                  onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(33, 150, 243, 0.3)'"
                >
                  查看文件
                </button>
              </div>

              <!-- 文件信息 -->
              <div
                style="
                  font-size: 13px;
                  color: #666;
                  margin-bottom: 16px;
                  padding: 8px 12px;
                  background: white;
                  border-radius: 6px;
                  border: 1px solid #e8e8e8;
                "
              >
                已上传 | 1.5MB | PNG格式
              </div>

              <!-- 审核操作区域 -->
              <div style="margin-bottom: 16px">
                <div style="font-size: 14px; font-weight: 500; margin-bottom: 12px; color: #333">
                  审核结果
                </div>
                <div style="display: flex; gap: 20px">
                  <label
                    style="
                      display: flex;
                      align-items: center;
                      font-size: 16px;
                      cursor: pointer;
                      padding: 12px 16px;
                      border-radius: 8px;
                      background: white;
                      border: 2px solid #e8e8e8;
                      transition: all 0.3s ease;
                      min-width: 80px;
                      justify-content: center;
                    "
                    onmouseover="this.style.borderColor='#4caf50'; this.style.background='#f8fff8'"
                    onmouseout="this.style.borderColor='#e8e8e8'; this.style.background='white'"
                  >
                    <input
                      type="radio"
                      name="business-status"
                      value="pass"
                      style="margin-right: 8px; transform: scale(1.2)"
                      onchange="this.parentElement.style.borderColor='#4caf50'; this.parentElement.style.background='#f8fff8'"
                    />
                    通过
                  </label>
                  <label
                    style="
                      display: flex;
                      align-items: center;
                      font-size: 16px;
                      cursor: pointer;
                      padding: 12px 16px;
                      border-radius: 8px;
                      background: white;
                      border: 2px solid #e8e8e8;
                      transition: all 0.3s ease;
                      min-width: 80px;
                      justify-content: center;
                    "
                    onmouseover="this.style.borderColor='#f44336'; this.style.background='#fff8f8'"
                    onmouseout="this.style.borderColor='#e8e8e8'; this.style.background='white'"
                  >
                    <input
                      type="radio"
                      name="business-status"
                      value="fail"
                      style="margin-right: 8px; transform: scale(1.2)"
                      onchange="this.parentElement.style.borderColor='#f44336'; this.parentElement.style.background='#fff8f8'"
                    />
                    不通过
                  </label>
                </div>
              </div>

              <!-- 备注输入区域 -->
              <div>
                <div style="font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #333">
                  备注信息
                </div>
                <textarea
                  placeholder="请输入备注信息..."
                  style="
                    width: calc(100% - 16px);
                    min-height: 60px;
                    padding: 12px;
                    border: 2px solid #e8e8e8;
                    border-radius: 8px;
                    resize: vertical;
                    font-size: 14px;
                    box-sizing: border-box;
                    transition: border-color 0.3s ease;
                  "
                  onfocus="this.style.borderColor='#2196f3'"
                  onblur="this.style.borderColor='#e8e8e8'"
                ></textarea>
              </div>
            </div>

            <!-- 补充说明材料 -->
            <div
              style="
                margin-bottom: 20px;
                padding: 16px;
                border: 1px solid #e0e0e0;
                border-radius: 12px;
                background: #fafafa;
              "
            >
              <!-- 资料标题和查看按钮 -->
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 12px;
                "
              >
                <div style="font-weight: bold; font-size: 16px; color: #333">补充说明材料</div>
                <button
                  onclick="viewOriginalFile('supplement-doc.docx')"
                  style="
                    background: linear-gradient(135deg, #2196f3, #1976d2);
                    color: white;
                    border: none;
                    padding: 8px 16px;
                    border-radius: 6px;
                    font-size: 14px;
                    cursor: pointer;
                    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
                    transition: all 0.3s ease;
                  "
                  onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 3px 6px rgba(33, 150, 243, 0.4)'"
                  onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(33, 150, 243, 0.3)'"
                >
                  查看文件
                </button>
              </div>

              <!-- 文件信息 -->
              <div
                style="
                  font-size: 13px;
                  color: #666;
                  margin-bottom: 16px;
                  padding: 8px 12px;
                  background: white;
                  border-radius: 6px;
                  border: 1px solid #e8e8e8;
                "
              >
                已上传 | 2.1MB | DOCX格式
              </div>

              <!-- 审核操作区域 -->
              <div style="margin-bottom: 16px">
                <div style="font-size: 14px; font-weight: 500; margin-bottom: 12px; color: #333">
                  审核结果
                </div>
                <div style="display: flex; gap: 20px">
                  <label
                    style="
                      display: flex;
                      align-items: center;
                      font-size: 16px;
                      cursor: pointer;
                      padding: 12px 16px;
                      border-radius: 8px;
                      background: white;
                      border: 2px solid #e8e8e8;
                      transition: all 0.3s ease;
                      min-width: 80px;
                      justify-content: center;
                    "
                    onmouseover="this.style.borderColor='#4caf50'; this.style.background='#f8fff8'"
                    onmouseout="this.style.borderColor='#e8e8e8'; this.style.background='white'"
                  >
                    <input
                      type="radio"
                      name="supplement-doc"
                      value="pass"
                      style="margin-right: 8px; transform: scale(1.2)"
                      onchange="this.parentElement.style.borderColor='#4caf50'; this.parentElement.style.background='#f8fff8'"
                    />
                    通过
                  </label>
                  <label
                    style="
                      display: flex;
                      align-items: center;
                      font-size: 16px;
                      cursor: pointer;
                      padding: 12px 16px;
                      border-radius: 8px;
                      background: white;
                      border: 2px solid #e8e8e8;
                      transition: all 0.3s ease;
                      min-width: 80px;
                      justify-content: center;
                    "
                    onmouseover="this.style.borderColor='#f44336'; this.style.background='#fff8f8'"
                    onmouseout="this.style.borderColor='#e8e8e8'; this.style.background='white'"
                  >
                    <input
                      type="radio"
                      name="supplement-doc"
                      value="fail"
                      style="margin-right: 8px; transform: scale(1.2)"
                      onchange="this.parentElement.style.borderColor='#f44336'; this.parentElement.style.background='#fff8f8'"
                    />
                    不通过
                  </label>
                </div>
              </div>

              <!-- 备注输入区域 -->
              <div>
                <div style="font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #333">
                  备注信息
                </div>
                <textarea
                  placeholder="请输入备注信息..."
                  style="
                    width: calc(100% - 16px);
                    min-height: 60px;
                    padding: 12px;
                    border: 2px solid #e8e8e8;
                    border-radius: 8px;
                    resize: vertical;
                    font-size: 14px;
                    box-sizing: border-box;
                    transition: border-color 0.3s ease;
                  "
                  onfocus="this.style.borderColor='#2196f3'"
                  onblur="this.style.borderColor='#e8e8e8'"
                ></textarea>
              </div>
            </div>
          </div>

          <!-- 整体预审意见 -->
          <div style="padding-top: 15px">
            <div style="font-size: 16px; font-weight: bold; margin-bottom: 10px">整体预审意见</div>
            <textarea
              placeholder="请输入整体预审意见..."
              style="
                width: calc(100% - 24px);
                min-height: 80px;
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: 8px;
                resize: vertical;
                font-size: 14px;
                box-sizing: border-box;
              "
            ></textarea>
          </div>

          <!-- 操作按钮 -->
          <div style="display: flex; gap: 10px; margin-bottom: 20px">
            <button
              style="
                width: 100%;
                padding: 12px;
                background: #4caf50;
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 16px;
                font-weight: bold;
              "
              onclick="confirmReviewDetail()"
            >
              确定
            </button>
          </div>

          <!-- 一键提交按钮（仅待提交状态显示） -->
          <div id="batchSubmitBtn" style="display: none; margin-bottom: 20px">
            <button
              style="
                width: 100%;
                padding: 12px;
                background: #2196f3;
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 16px;
                font-weight: bold;
              "
              onclick="batchSubmitToHR()"
            >
              一键提交至人力部
            </button>
          </div>
        </div>
      </div>

      <!-- 管理端功能页面组 -->
      <div style="grid-column: 1 / -1; margin: 20px 0 10px 0">
        <h2
          style="
            margin: 0;
            color: #495057;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          "
        >
          管理端功能页面
        </h2>
      </div>

      <!-- 监控管理页面 -->
      <div class="phone-frame">
        <div class="phone-header">
          <span class="back-btn">←</span>
          <span class="title">监控管理</span>
        </div>
        <div class="phone-content">
          <!-- 批次和机构筛选器区域 -->
          <div style="margin-bottom: 15px; display: flex; gap: 8px">
            <div class="dropdown-container" style="flex: 1">
              <div class="dropdown-trigger" onclick="toggleDropdown('monitorBatchFilter')">
                <span id="monitorBatchFilterText" style="font-size: 11px">
                  南京市分行2025年第一批次
                </span>
                <span class="dropdown-arrow">▼</span>
              </div>
              <div class="dropdown-menu" id="monitorBatchFilter">
                <div
                  class="dropdown-item"
                  onclick="selectFilter('monitorBatchFilter', '南京市分行2025年第一批次', 'batch1')"
                  style="font-size: 11px"
                >
                  南京市分行2025年第一批次
                </div>
                <div
                  class="dropdown-item"
                  onclick="selectFilter('monitorBatchFilter', '江苏省分行2024年第四批次', 'batch2')"
                  style="font-size: 11px"
                >
                  江苏省分行2024年第四批次
                </div>
                <div
                  class="dropdown-item"
                  onclick="selectFilter('monitorBatchFilter', '苏州市分行2025年第一批次', 'batch3')"
                  style="font-size: 11px"
                >
                  苏州市分行2025年第一批次
                </div>
              </div>
            </div>
            <div class="dropdown-container" style="flex: 1">
              <div class="dropdown-trigger" onclick="toggleDropdown('monitorOrgFilter')">
                <span id="monitorOrgFilterText">江苏省分行</span>
                <span class="dropdown-arrow">▼</span>
              </div>
              <div class="dropdown-menu" id="monitorOrgFilter">
                <div
                  class="dropdown-item"
                  onclick="selectFilter('monitorOrgFilter', '江苏省分行', 'org1')"
                >
                  江苏省分行
                </div>
                <div
                  class="dropdown-item"
                  onclick="selectFilter('monitorOrgFilter', '南京市分行', 'org2')"
                >
                  南京市分行
                </div>
                <div
                  class="dropdown-item"
                  onclick="selectFilter('monitorOrgFilter', '苏州市分行', 'org3')"
                >
                  苏州市分行
                </div>
                <div
                  class="dropdown-item"
                  onclick="selectFilter('monitorOrgFilter', '无锡市分行', 'org4')"
                >
                  无锡市分行
                </div>
                <div
                  class="dropdown-item"
                  onclick="selectFilter('monitorOrgFilter', '常州市分行', 'org5')"
                >
                  常州市分行
                </div>
              </div>
            </div>
          </div>

          <!-- 统计概览区域 -->
          <div
            class="score-display"
            style="background: linear-gradient(135deg, #4a90e2, #357abd); margin-bottom: 20px"
          >
            <div style="display: flex; justify-content: space-between; margin-bottom: 15px">
              <div style="text-align: center; flex: 1">
                <div style="font-size: 24px; font-weight: bold; color: white">156</div>
                <div style="font-size: 12px; opacity: 0.9; color: white">排查总数</div>
              </div>
              <div style="text-align: center; flex: 1">
                <div style="font-size: 24px; font-weight: bold; color: white">142</div>
                <div style="font-size: 12px; opacity: 0.9; color: white">已上报</div>
              </div>
              <div style="text-align: center; flex: 1">
                <div style="font-size: 24px; font-weight: bold; color: white">14</div>
                <div style="font-size: 12px; opacity: 0.9; color: white">未上报</div>
              </div>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 15px">
              <div style="text-align: center; flex: 1">
                <div style="font-size: 20px; font-weight: bold; color: white">120</div>
                <div style="font-size: 12px; opacity: 0.9; color: white">已完成</div>
              </div>
              <div style="text-align: center; flex: 1">
                <div style="font-size: 20px; font-weight: bold; color: #67c23a">8</div>
                <div style="font-size: 12px; opacity: 0.9; color: white">特别关注</div>
              </div>
              <div style="text-align: center; flex: 1">
                <div style="font-size: 20px; font-weight: bold; color: #ffd700">8</div>
                <div style="font-size: 12px; opacity: 0.9; color: white">一级预警</div>
              </div>
            </div>
            <div style="display: flex; justify-content: space-between">
              <div style="text-align: center; flex: 1">
                <div style="font-size: 20px; font-weight: bold; color: #ff8800">12</div>
                <div style="font-size: 12px; opacity: 0.9; color: white">二级预警</div>
              </div>
              <div style="text-align: center; flex: 1">
                <div style="font-size: 20px; font-weight: bold; color: #ff4444">6</div>
                <div style="font-size: 12px; opacity: 0.9; color: white">三级预警</div>
              </div>
              <div style="text-align: center; flex: 1"></div>
            </div>
          </div>

          <!-- 上报情况区域 -->
          <div
            style="
              margin-bottom: 20px;
              background: white;
              border-radius: 12px;
              padding: 20px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            "
          >
            <div style="font-size: 16px; font-weight: 600; color: #333; margin-bottom: 15px">
              上报情况
            </div>
            <div style="display: flex; justify-content: center; align-items: center">
              <div id="pieChart" style="width: 120px; height: 120px"></div>
            </div>
          </div>

          <!-- 机构排查情况图表区域 -->
          <div
            style="
              margin-bottom: 20px;
              background: white;
              border-radius: 12px;
              padding: 20px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            "
          >
            <div style="font-size: 16px; font-weight: 600; color: #333; margin-bottom: 15px">
              机构排查情况
            </div>
            <div id="orgChart" style="width: 100%; height: 500px"></div>
            <div
              style="
                margin-top: 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 10px;
              "
            ></div>
          </div>
          <!-- 仅保留预警类型筛选 -->
          <div style="margin-bottom: 20px">
            <div style="display: flex; gap: 10px; margin-bottom: 10px">
              <div class="dropdown-container" style="flex: 1">
                <div class="dropdown-trigger" onclick="toggleDropdown('warningFilter')">
                  <span id="warningFilterText">全部预警类型</span>
                  <span class="dropdown-arrow">▼</span>
                </div>
                <div class="dropdown-menu" id="warningFilter">
                  <div
                    class="dropdown-item"
                    onclick="selectFilter('warningFilter', '全部预警类型', 'all')"
                  >
                    全部预警类型
                  </div>
                  <div
                    class="dropdown-item"
                    onclick="selectFilter('warningFilter', '正常', 'normal')"
                  >
                    正常
                  </div>
                  <div
                    class="dropdown-item"
                    onclick="selectFilter('warningFilter', '必要关注', 'attention')"
                  >
                    必要关注
                  </div>
                  <div
                    class="dropdown-item"
                    onclick="selectFilter('warningFilter', '一级预警', 'level1')"
                  >
                    一级预警
                  </div>
                  <div
                    class="dropdown-item"
                    onclick="selectFilter('warningFilter', '二级预警', 'level2')"
                  >
                    二级预警
                  </div>
                  <div
                    class="dropdown-item"
                    onclick="selectFilter('warningFilter', '三级预警', 'level3')"
                  >
                    三级预警
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 员工列表区域 -->
          <div class="section-title">员工列表(共8人)</div>
          <div class="data-item">
            <div class="data-label">
              <div class="employee-name">张三</div>
              <div class="employee-info">工号：12345678 | 风险管理部</div>
            </div>
            <div class="data-value">
              <div class="status-badge status-failed" style="background: #ffd700; color: #333">
                一级预警
              </div>
              <div class="score-info">分数：65分</div>
              <div class="time-info">2024-09-22 14:30</div>
            </div>
          </div>

          <div class="data-item">
            <div class="data-label">
              <div class="employee-name">李四</div>
              <div class="employee-info">工号：87654321 | 信贷管理部</div>
            </div>
            <div class="data-value">
              <div class="status-badge status-analyzing" style="background: #ff8800; color: white">
                二级预警
              </div>
              <div class="score-info">分数：72分</div>
              <div class="time-info">2024-09-22 13:45</div>
            </div>
          </div>

          <div class="data-item">
            <div class="data-label">
              <div class="employee-name">王五</div>
              <div class="employee-info">工号：11223344 | 运营管理部</div>
            </div>
            <div class="data-value">
              <div class="status-badge status-completed" style="background: #ff4444; color: white">
                三级预警
              </div>
              <div class="score-info">分数：78分</div>
              <div class="time-info">2024-09-22 12:20</div>
            </div>
          </div>

          <div class="data-item">
            <div class="data-label">
              <div class="employee-name">赵六</div>
              <div class="employee-info">工号：55667788 | 风险管理部</div>
            </div>
            <div class="data-value">
              <div class="status-badge status-failed" style="background: #ffd700; color: #333">
                一级预警
              </div>
              <div class="score-info">分数：58分</div>
              <div class="time-info">2024-09-22 11:15</div>
            </div>
          </div>

          <div class="data-item">
            <div class="data-label">
              <div class="employee-name">孙七</div>
              <div class="employee-info">工号：99887766 | 信贷管理部</div>
            </div>
            <div class="data-value">
              <div class="status-badge status-analyzing" style="background: #ff8800; color: white">
                二级预警
              </div>
              <div class="score-info">分数：75分</div>
              <div class="time-info">2024-09-22 10:30</div>
            </div>
          </div>

          <div class="data-item">
            <div class="data-label">
              <div class="employee-name">周八</div>
              <div class="employee-info">工号：44332211 | 运营管理部</div>
            </div>
            <div class="data-value">
              <div class="status-badge status-completed" style="background: #4caf50; color: white">
                正常
              </div>
              <div class="score-info">分数：85分</div>
              <div class="time-info">2024-09-22 09:45</div>
            </div>
          </div>

          <div class="data-item">
            <div class="data-label">
              <div class="employee-name">吴九</div>
              <div class="employee-info">工号：77889900 | 风险管理部</div>
            </div>
            <div class="data-value">
              <div class="status-badge status-failed" style="background: #ffd700; color: #333">
                一级预警
              </div>
              <div class="score-info">分数：62分</div>
              <div class="time-info">2024-09-22 08:20</div>
            </div>
          </div>

          <div class="data-item">
            <div class="data-label">
              <div class="employee-name">郑十</div>
              <div class="employee-info">工号：33445566 | 信贷管理部</div>
            </div>
            <div class="data-value">
              <div class="status-badge status-completed" style="background: #4caf50; color: white">
                正常
              </div>
              <div class="score-info">分数：92分</div>
              <div class="time-info">2024-09-22 07:50</div>
            </div>
          </div>

          <div class="data-item">
            <div class="data-label">
              <div class="employee-name">钱十一</div>
              <div class="employee-info">工号：00112233 | 信贷管理部</div>
            </div>
            <div class="data-value">
              <div class="status-badge status-analyzing" style="background: #ff8800; color: white">
                二级预警
              </div>
              <div class="score-info">分数：70分</div>
              <div class="time-info">2024-09-21 16:30</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ECharts图表库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <script>
      // 页面加载完成后初始化图表
      document.addEventListener('DOMContentLoaded', function () {
        // 延迟初始化图表，确保DOM完全加载
        setTimeout(function () {
          initOrgChart()
          initPieChart()
        }, 500)
      })

      // 异常提醒详情弹窗显示函数
      function showAbnormalDetailModal(type, modalId, overlayId) {
        const modal = document.getElementById(modalId)
        const overlay = document.getElementById(overlayId)

        // 根据类型设置不同的异常详情内容
        const abnormalDetails = {
          'credit-limit': {
            name: '信用卡已使用额度',
            meaning: '反映个人信用卡使用程度，使用率过高存在风险',
            reason: '使用额度超过标准值',
            sourceType: '征信报告',
            sourceLocation: '征信报告第2页第20行',
            original: '"已使用额度：80,000元"',
            riskLevel: '高风险',
          },
          'overdue-accounts': {
            name: '逾期账户数',
            meaning: '反映个人还款信用状况，逾期账户数越多风险越高',
            reason: '存在逾期记录，影响个人信用评级',
            sourceType: '征信报告',
            sourceLocation: '征信报告第3页第8行',
            original: '"逾期账户数：2个"',
            riskLevel: '高风险',
          },
          'credit-increase': {
            name: '相较上一期信用卡账户增加数',
            meaning: '反映信用卡账户数量的变化趋势，增加过快可能存在风险',
            reason: '账户增加数量超过标准值',
            sourceType: '征信报告对比',
            sourceLocation: '征信报告对比分析',
            original: '"相比上期增加3个账户"',
            riskLevel: '中风险',
          },
        }

        const detail = abnormalDetails[type] || abnormalDetails['credit-limit']

        // 根据弹窗ID确定字段ID后缀
        const suffix = modalId === 'abnormalModal2' ? '2' : '3'

        document.getElementById('abnormal-name' + suffix).textContent = detail.name
        document.getElementById('abnormal-reason' + suffix).textContent = detail.reason
        document.getElementById('abnormal-original' + suffix).textContent =
          detail.sourceLocation + detail.original

        overlay.classList.add('show')
        modal.classList.add('show')
      }

      // 员工上传资料详情弹窗显示函数
      function showDocumentDetailModal(type, modalId, overlayId) {
        const modal = document.getElementById(modalId)
        const overlay = document.getElementById(overlayId)

        // 根据类型设置不同的资料详情内容
        const documentDetails = {
          'credit-report': {
            name: '征信报告申请回执',
            description: '个人征信查询报告，包含信贷记录和还款情况',
            uploadTime: '2025-10-11 09:30:25',
            fileSize: '1.2MB',
            fileFormat: 'PDF',
            content: '征信报告申请回执内容预览区域<br><small>（实际显示PDF文档内容）</small>',
            preview: '✓ 支持在线预览',
          },
          'criminal-record': {
            name: '无犯罪记录证明',
            description: '公安机关出具的无违法犯罪记录证明文件',
            uploadTime: '2025-10-11 09:35:10',
            fileSize: '856KB',
            fileFormat: 'JPG',
            content: '无犯罪记录证明图片预览区域<br><small>（实际显示证明图片）</small>',
            preview: '✓ 支持在线预览',
          },
          'business-status': {
            name: '经营情况截图',
            description: '个人经营状况查询结果截图',
            uploadTime: '2025-10-11 09:40:15',
            fileSize: '1.5MB',
            fileFormat: 'PNG',
            content: '经营情况截图预览区域<br><small>（实际显示截图内容）</small>',
            preview: '✓ 支持在线预览',
          },
          'supplement-doc': {
            name: '补充说明材料',
            description: '员工自行上传的补充说明文档',
            uploadTime: '2025-10-11 09:45:20',
            fileSize: '2.1MB',
            fileFormat: 'DOCX',
            content: '补充说明材料预览区域<br><small>（实际显示文档内容）</small>',
            preview: '✓ 支持在线预览',
          },
        }

        const detail = documentDetails[type] || documentDetails['credit-report']

        // 根据弹窗ID确定字段ID后缀
        const suffix = modalId === 'documentModal2' ? '2' : '3'

        document.getElementById('document-name' + suffix).textContent = detail.name
        document.getElementById('document-upload-time' + suffix).textContent = detail.uploadTime
        document.getElementById('document-content' + suffix).innerHTML = detail.content

        overlay.classList.add('show')
        modal.classList.add('show')
      }

      // 异常提醒详情弹窗隐藏函数
      function hideAbnormalDetailModal(modalId, overlayId) {
        const modal = document.getElementById(modalId)
        const overlay = document.getElementById(overlayId)
        overlay.classList.remove('show')
        modal.classList.remove('show')
      }

      // 员工上传资料详情弹窗隐藏函数
      function hideDocumentDetailModal(modalId, overlayId) {
        const modal = document.getElementById(modalId)
        const overlay = document.getElementById(overlayId)
        overlay.classList.remove('show')
        modal.classList.remove('show')
      }

      // 通用弹窗显示函数
      function showDetailModalGeneric(type, modalId, overlayId) {
        const modal = document.getElementById(modalId)
        const overlay = document.getElementById(overlayId)

        // 根据类型设置不同的详情内容
        const details = {
          'credit-accounts': {
            name: '未结清/未销户信用卡账户数',
            meaning: '反映个人信用卡使用情况，账户数过多可能存在过度消费风险',
            sourceType: '行为报告',
            sourceLocation: '行为报告第2页第15行',
            original: '"信用卡账户数：3个"',
          },
          'overdue-accounts': {
            name: '逾期账户数',
            meaning: '反映个人还款信用状况，逾期账户数越多风险越高',
            sourceType: '行为报告',
            sourceLocation: '行为报告第3页第8行',
            original: '"逾期账户数：0个"',
          },
          'credit-limit': {
            name: '信用卡已使用额度',
            meaning: '反映个人信用卡使用程度，使用率过高存在风险',
            sourceType: '行为报告',
            sourceLocation: '行为报告第2页第20行',
            original: '"已使用额度：50,000元"',
          },
          'credit-increase': {
            name: '相较上一期信用卡账户增加数',
            meaning: '反映信用卡账户数量的变化趋势，增加过快可能存在风险',
            sourceType: '行为报告对比',
            sourceLocation: '行为报告对比分析',
            original: '"相比上期增加1个账户"',
          },
          'criminal-record': {
            name: '无犯罪记录证明',
            meaning: '验证个人是否有违法犯罪记录，确保员工品行端正',
            sourceType: '无犯罪证明截图',
            sourceLocation: '无犯罪证明截图',
            original: '[直接显示图片]',
          },
          'insurance-cloud': {
            name: '保险中介云信息',
            meaning: '查询个人在保险中介机构的记录，发现潜在风险',
            sourceType: '保险中介云查询结果',
            sourceLocation: '保险中介云查询结果',
            original: '"查询结果：无异常记录"',
          },
          'business-status': {
            name: '经营情况',
            meaning: '了解个人经营状况，评估经营风险',
            sourceType: '经营情况截图',
            sourceLocation: '经营情况截图',
            original: '[直接显示图片]',
          },
          'execution-info': {
            name: '中国执行网信息',
            meaning: '查询个人是否有被执行记录，评估法律风险',
            sourceType: '中国执行网查询结果',
            sourceLocation: '中国执行网查询结果',
            original: '"查询结果：无被执行记录"',
          },
        }

        const detail = details[type] || details['credit-accounts']

        // 根据弹窗ID确定字段ID后缀
        const suffix = modalId === 'detailModal2' ? '2' : '3'

        document.getElementById('detail-name' + suffix).textContent = detail.name
        document.getElementById('detail-meaning' + suffix).textContent = detail.meaning
        document.getElementById('detail-source-type' + suffix).textContent = detail.sourceType
        document.getElementById('detail-source-location' + suffix).textContent =
          detail.sourceLocation
        document.getElementById('detail-original' + suffix).textContent = detail.original

        overlay.classList.add('show')
        modal.classList.add('show')
      }

      // 通用弹窗隐藏函数
      function hideDetailModal(modalId, overlayId) {
        const modal = document.getElementById(modalId)
        const overlay = document.getElementById(overlayId)
        overlay.classList.remove('show')
        modal.classList.remove('show')
      }

      // 保持向后兼容的旧函数
      function showDetailModal(type) {
        showDetailModalGeneric(type, 'detailModal2', 'overlay2')
      }

      function showAnalyzingModal() {
        alert('系统正在分析中，请稍候...')
      }

      function hideModal() {
        const modal = document.getElementById('detailModal')
        const overlay = document.getElementById('overlay')
        overlay.classList.remove('show')
        modal.classList.remove('show')
      }

      function showUploadModal(type) {
        alert('上传功能演示：' + type)
      }

      function showGuideModal(type, pageId = '1') {
        const modal = document.getElementById('guideModal' + pageId)
        const overlay = document.getElementById('guideOverlay' + pageId)
        const title = document.getElementById('guideTitle' + pageId)
        const content = document.getElementById('guideContent' + pageId)

        // 根据类型设置不同的指导内容
        const guides = {
          credit: {
            title: '如何获取征信资料',
            content: `
              <div class="guide-step">
                <div class="guide-step-title">步骤1：登录征信中心官网</div>
                <div class="guide-step-desc">访问中国人民银行征信中心官网（www.pbccrc.org.cn）</div>
              </div>
              <div class="guide-step">
                <div class="guide-step-title">步骤2：注册并验证身份</div>
                <div class="guide-step-desc">使用身份证号注册账号，完成身份验证</div>
              </div>
              <div class="guide-step">
                <div class="guide-step-title">步骤3：申请征信报告</div>
                <div class="guide-step-desc">选择"个人信用信息服务平台"，申请个人征信报告</div>
              </div>
              <div class="guide-step">
                <div class="guide-step-title">步骤4：下载报告</div>
                <div class="guide-step-desc">24小时后登录下载PDF格式的征信报告</div>
              </div>
            `,
          },
          criminal: {
            title: '如何获取无犯罪证明',
            content: `
              <div class="guide-step">
                <div class="guide-step-title">步骤1：准备材料</div>
                <div class="guide-step-desc">携带身份证原件及复印件到户籍所在地派出所</div>
              </div>
              <div class="guide-step">
                <div class="guide-step-title">步骤2：填写申请表</div>
                <div class="guide-step-desc">填写《无犯罪记录证明申请表》</div>
              </div>
              <div class="guide-step">
                <div class="guide-step-title">步骤3：等待审核</div>
                <div class="guide-step-desc">派出所审核通过后，一般3-5个工作日可领取</div>
              </div>
              <div class="guide-step">
                <div class="guide-step-title">步骤4：拍照保存</div>
                <div class="guide-step-desc">领取证明后拍照保存，确保图片清晰完整</div>
              </div>
            `,
          },
          business: {
            title: '如何获取经营情况截图',
            content: `
              <div class="guide-step">
                <div class="guide-step-title">步骤1：登录相关平台</div>
                <div class="guide-step-desc">登录国家企业信用信息公示系统或相关经营平台</div>
              </div>
              <div class="guide-step">
                <div class="guide-step-title">步骤2：查询企业信息</div>
                <div class="guide-step-desc">输入企业名称或统一社会信用代码进行查询</div>
              </div>
              <div class="guide-step">
                <div class="guide-step-title">步骤3：查看经营状况</div>
                <div class="guide-step-desc">查看企业基本信息、经营状况、年报等信息</div>
              </div>
              <div class="guide-step">
                <div class="guide-step-title">步骤4：截图保存</div>
                <div class="guide-step-desc">对关键信息进行截图，确保内容完整清晰</div>
              </div>
            `,
          },
        }

        const guide = guides[type] || guides['credit']
        title.textContent = guide.title
        content.innerHTML = guide.content

        overlay.classList.add('show')
        modal.classList.add('show')
      }

      function hideGuideModal(pageId = '1') {
        const modal = document.getElementById('guideModal' + pageId)
        const overlay = document.getElementById('guideOverlay' + pageId)
        overlay.classList.remove('show')
        modal.classList.remove('show')
      }

      function submitData() {
        alert('提交成功！')
      }

      // 授权相关函数
      let isAuthorized = false // 授权状态

      function showAuthModal() {
        const modal = document.getElementById('authModal')
        const overlay = document.getElementById('authOverlay')
        if (modal && overlay) {
          overlay.classList.add('show')
          modal.classList.add('show')
        }
      }

      function hideAuthModal() {
        const modal = document.getElementById('authModal')
        const modal2 = document.getElementById('authModal2')
        const overlay = document.getElementById('authOverlay')
        const overlay2 = document.getElementById('authOverlay2')

        if (modal && overlay) {
          overlay.classList.remove('show')
          modal.classList.remove('show')
        }
        if (modal2 && overlay2) {
          overlay2.classList.remove('show')
          modal2.classList.remove('show')
        }
      }

      function goToSignature() {
        hideAuthModal()
        // 滚动到签字页面
        const signaturePage = document.querySelector('.phone-frame:nth-of-type(3)') // 签字页面是第3个phone-frame
        if (signaturePage) {
          signaturePage.scrollIntoView({ behavior: 'smooth' })
          // 延迟初始化画布，确保页面已显示
          setTimeout(() => {
            initSignatureCanvas()
          }, 100)
        }
      }

      function hideSignaturePage() {
        // 滚动回资料上报页面
        const uploadPage = document.querySelector('.phone-frame:nth-of-type(1)') // 资料上报页面是第1个phone-frame
        if (uploadPage) {
          uploadPage.scrollIntoView({ behavior: 'smooth' })
        }
      }

      function initSignatureCanvas() {
        const canvas = document.getElementById('signatureCanvas')
        const placeholder = document.getElementById('signaturePlaceholder')
        if (!canvas) return

        const ctx = canvas.getContext('2d')
        let isDrawing = false
        let hasSignature = false

        // 设置画布大小
        const rect = canvas.getBoundingClientRect()
        canvas.width = rect.width * window.devicePixelRatio
        canvas.height = rect.height * window.devicePixelRatio
        ctx.scale(window.devicePixelRatio, window.devicePixelRatio)

        // 设置画笔样式
        ctx.strokeStyle = '#000'
        ctx.lineWidth = 2
        ctx.lineCap = 'round'
        ctx.lineJoin = 'round'

        // 鼠标事件
        canvas.addEventListener('mousedown', startDrawing)
        canvas.addEventListener('mousemove', draw)
        canvas.addEventListener('mouseup', stopDrawing)
        canvas.addEventListener('mouseout', stopDrawing)

        // 触摸事件
        canvas.addEventListener('touchstart', handleTouch)
        canvas.addEventListener('touchmove', handleTouch)
        canvas.addEventListener('touchend', stopDrawing)

        function startDrawing(e) {
          isDrawing = true
          hasSignature = true
          placeholder.style.display = 'none'

          const rect = canvas.getBoundingClientRect()
          const x = (e.clientX || e.touches[0].clientX) - rect.left
          const y = (e.clientY || e.touches[0].clientY) - rect.top

          ctx.beginPath()
          ctx.moveTo(x, y)
        }

        function draw(e) {
          if (!isDrawing) return

          const rect = canvas.getBoundingClientRect()
          const x = (e.clientX || e.touches[0].clientX) - rect.left
          const y = (e.clientY || e.touches[0].clientY) - rect.top

          ctx.lineTo(x, y)
          ctx.stroke()
        }

        function stopDrawing() {
          isDrawing = false
        }

        function handleTouch(e) {
          e.preventDefault()
          const touch = e.touches[0]
          const mouseEvent = new MouseEvent(
            e.type === 'touchstart'
              ? 'mousedown'
              : e.type === 'touchmove'
              ? 'mousemove'
              : 'mouseup',
            {
              clientX: touch.clientX,
              clientY: touch.clientY,
            }
          )
          canvas.dispatchEvent(mouseEvent)
        }
      }

      function clearSignature() {
        const canvas = document.getElementById('signatureCanvas')
        const placeholder = document.getElementById('signaturePlaceholder')
        if (canvas && placeholder) {
          const ctx = canvas.getContext('2d')
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          placeholder.style.display = 'block'
        }
      }

      function confirmSignature() {
        const canvas = document.getElementById('signatureCanvas')
        if (canvas) {
          // 检查是否有签名
          const ctx = canvas.getContext('2d')
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
          const data = imageData.data
          let hasSignature = false

          for (let i = 0; i < data.length; i += 4) {
            if (data[i] !== 0 || data[i + 1] !== 0 || data[i + 2] !== 0) {
              hasSignature = true
              break
            }
          }

          if (!hasSignature) {
            alert('请先进行签字')
            return
          }

          // 完成授权
          isAuthorized = true
          alert('授权完成！您现在可以上传征信报告申请回执了。')
          hideSignaturePage()
        }
      }

      function checkAuthAndUpload(type) {
        if (!isAuthorized) {
          alert('请先完成授权后再上传')
          return
        }
        showUploadModal(type)
      }

      // 预审管理页面函数
      function goToReviewDetail(empId) {
        // 跳转到预审详情页面
        document.getElementById('reviewDetailPage').style.display = 'block'
        // 根据员工状态显示/隐藏一键提交按钮
        if (empId === 'emp002') {
          document.getElementById('batchSubmitBtn').style.display = 'block'
        } else {
          document.getElementById('batchSubmitBtn').style.display = 'none'
        }
      }

      function goBackToReviewList() {
        document.getElementById('reviewDetailPage').style.display = 'none'
      }

      // 统计概览点击事件
      function showPendingReviewList() {
        filterList('pending')
        // 同时更新标签状态
        updateTabStatus('pending')
      }

      function showPendingSubmitList() {
        filterList('pendingSubmit')
        updateTabStatus('pendingSubmit')
      }

      function showSubmittedList() {
        filterList('submitted')
        updateTabStatus('submitted')
      }

      function showRejectedList() {
        filterList('rejected')
        updateTabStatus('rejected')
      }

      // 真实的列表筛选功能
      function filterList(status, clickedTab = null) {
        // 更新标签状态
        if (clickedTab) {
          updateTabStatus(status, clickedTab)
        }

        // 获取所有列表项
        const allItems = document.querySelectorAll('.data-item[data-status]')

        // 更新列表标题
        const titleMap = {
          all: '全部列表',
          pending: '待预审列表',
          pendingSubmit: '待提交列表',
          submitted: '已提交列表',
          rejected: '已驳回列表',
        }
        document.getElementById('listTitle').textContent = titleMap[status] || '全部列表'

        // 控制全部提交按钮的显示/隐藏
        const batchSubmitBtn = document.getElementById('batchSubmitBtn')
        if (status === 'pendingSubmit') {
          batchSubmitBtn.style.display = 'block'
        } else {
          batchSubmitBtn.style.display = 'none'
        }

        // 筛选显示/隐藏列表项
        allItems.forEach((item) => {
          if (status === 'all' || item.getAttribute('data-status') === status) {
            item.style.display = 'flex'
          } else {
            item.style.display = 'none'
          }
        })

        // 更新统计数字（可选，这里只是示例）
        updateStatistics()
      }

      // 更新标签状态
      function updateTabStatus(activeStatus, clickedTab = null) {
        const allTabs = document.querySelectorAll('.filter-tab')

        allTabs.forEach((tab) => {
          const tabStatus = tab.getAttribute('data-filter')
          if (tabStatus === activeStatus) {
            tab.style.color = '#2196f3'
            tab.style.borderBottom = '2px solid #2196f3'
            tab.style.fontWeight = '500'
          } else {
            tab.style.color = '#333'
            tab.style.borderBottom = '2px solid transparent'
            tab.style.fontWeight = '400'
          }
        })
      }

      // 更新统计数字（根据实际筛选结果）
      function updateStatistics() {
        const pendingCount = document.querySelectorAll(
          '.data-item[data-status="pending"]:not([style*="display: none"])'
        ).length
        const pendingSubmitCount = document.querySelectorAll(
          '.data-item[data-status="pendingSubmit"]:not([style*="display: none"])'
        ).length
        const submittedCount = document.querySelectorAll(
          '.data-item[data-status="submitted"]:not([style*="display: none"])'
        ).length
        const rejectedCount = document.querySelectorAll(
          '.data-item[data-status="rejected"]:not([style*="display: none"])'
        ).length

        // 这里可以更新统计卡片上的数字（如果需要的话）
        console.log(
          `统计更新: 待预审${pendingCount}, 待提交${pendingSubmitCount}, 已提交${submittedCount}, 已驳回${rejectedCount}`
        )
      }

      // 预审详情页面操作
      function confirmReviewDetail() {
        alert('预审结果已确定！')
        goBackToReviewList()
      }

      function batchSubmitToHR() {
        alert('一键提交至人力部成功！')
        goBackToReviewList()
      }

      function showReviewDetail(empId) {
        const modal = document.getElementById('reviewDetailModal')
        const overlay = document.getElementById('reviewOverlay')
        overlay.classList.add('show')
        modal.classList.add('show')
      }

      function hideReviewDetail() {
        const modal = document.getElementById('reviewDetailModal')
        const overlay = document.getElementById('reviewOverlay')
        overlay.classList.remove('show')
        modal.classList.remove('show')
      }

      function confirmReview() {
        alert('预审结果已确定！')
        hideReviewDetail()
      }

      // 全部提交功能
      function batchSubmitAll() {
        // 获取所有待提交的项目
        const pendingSubmitItems = document.querySelectorAll(
          '.data-item[data-status="pendingSubmit"]:not([style*="display: none"])'
        )

        if (pendingSubmitItems.length === 0) {
          alert('没有待提交的项目')
          return
        }

        // 确认对话框
        const confirmMessage = `确定要提交所有 ${pendingSubmitItems.length} 个待提交项目吗？`
        if (confirm(confirmMessage)) {
          // 执行批量提交逻辑
          alert(`成功提交 ${pendingSubmitItems.length} 个项目！`)

          // 这里可以添加实际的批量提交逻辑
          // 例如：更新状态、调用API等

          // 模拟状态更新：将待提交项目改为已提交
          pendingSubmitItems.forEach((item) => {
            // 更新状态标签
            const statusBadge = item.querySelector('.status-badge')
            if (statusBadge) {
              statusBadge.textContent = '已提交'
              statusBadge.style.background = '#4caf50'
            }

            // 更新状态属性
            item.setAttribute('data-status', 'submitted')
          })

          // 重新计算统计数据
          updateStatistics()

          // 更新菜单标题中的数字
          updateMenuNumbers()
        }
      }

      // 更新菜单数字
      function updateMenuNumbers() {
        const pendingCount = document.querySelectorAll('.data-item[data-status="pending"]').length
        const pendingSubmitCount = document.querySelectorAll(
          '.data-item[data-status="pendingSubmit"]'
        ).length
        const submittedCount = document.querySelectorAll(
          '.data-item[data-status="submitted"]'
        ).length
        const rejectedCount = document.querySelectorAll('.data-item[data-status="rejected"]').length

        // 更新菜单标题
        const pendingTab = document.querySelector('.filter-tab[data-filter="pending"]')
        const pendingSubmitTab = document.querySelector('.filter-tab[data-filter="pendingSubmit"]')
        const submittedTab = document.querySelector('.filter-tab[data-filter="submitted"]')
        const rejectedTab = document.querySelector('.filter-tab[data-filter="rejected"]')

        if (pendingTab) pendingTab.textContent = `待预审（${pendingCount}）`
        if (pendingSubmitTab) pendingSubmitTab.textContent = `待提交（${pendingSubmitCount}）`
        if (submittedTab) submittedTab.textContent = `已提交（${submittedCount}）`
        if (rejectedTab) rejectedTab.textContent = `已驳回（${rejectedCount}）`
      }

      // 监控管理页面函数

      // 初始化机构排查情况图表
      function initOrgChart() {
        // 检查是否加载了ECharts
        if (typeof echarts === 'undefined') {
          console.log('ECharts未加载，跳过图表初始化')
          return
        }

        const chartDom = document.getElementById('orgChart')
        if (!chartDom) {
          console.log('图表容器未找到')
          return
        }

        const myChart = echarts.init(chartDom)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            data: ['正常', '必要关注', '一级预警', '二级预警', '三级预警'],
            bottom: 0,
            textStyle: {
              fontSize: 12,
            },
          },
          grid: {
            left: '2%',
            right: '4%',
            bottom: '15%',
            top: '5%',
            containLabel: true,
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 10,
            },
          },
          yAxis: {
            type: 'category',
            data: [
              '南京市分行',
              '苏州市分行',
              '无锡市分行',
              '常州市分行',
              '徐州市分行',
              '连云港市分行',
              '淮安市分行',
              '盐城市分行',
              '扬州市分行',
              '镇江市分行',
              '泰州市分行',
              '宿迁市分行',
            ],
            axisLabel: {
              fontSize: 10,
            },
          },
          series: [
            {
              name: '正常',
              type: 'bar',
              stack: 'total',
              data: [95, 88, 102, 76, 85, 72, 68, 78, 82, 75, 70, 65],
              itemStyle: {
                color: '#00C851',
              },
            },
            {
              name: '必要关注',
              type: 'bar',
              stack: 'total',
              data: [12, 8, 18, 10, 12, 9, 7, 11, 13, 10, 8, 6],
              itemStyle: {
                color: '#00C851',
              },
            },
            {
              name: '一级预警',
              type: 'bar',
              stack: 'total',
              data: [6, 4, 9, 5, 6, 4, 3, 5, 7, 5, 4, 3],
              itemStyle: {
                color: '#FFD700',
              },
            },
            {
              name: '二级预警',
              type: 'bar',
              stack: 'total',
              data: [3, 2, 6, 3, 4, 2, 2, 3, 4, 3, 2, 2],
              itemStyle: {
                color: '#FF8800',
              },
            },
            {
              name: '三级预警',
              type: 'bar',
              stack: 'total',
              data: [1, 1, 3, 1, 2, 1, 1, 2, 2, 1, 1, 1],
              itemStyle: {
                color: '#FF4444',
              },
            },
          ],
        }

        myChart.setOption(option)

        // 图表点击事件
        myChart.on('click', function (params) {
          console.log('点击图表:', params)
          alert(`点击了${params.name}的${params.seriesName}，数值：${params.value}`)
        })

        // 响应式调整
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }

      // 初始化饼状图
      function initPieChart() {
        // 检查是否加载了ECharts
        if (typeof echarts === 'undefined') {
          console.log('ECharts未加载，跳过饼状图初始化')
          return
        }

        const pieChartDom = document.getElementById('pieChart')
        if (!pieChartDom) {
          console.log('饼状图容器未找到')
          return
        }

        const pieChart = echarts.init(pieChartDom)
        const pieOption = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
          },
          series: [
            {
              name: '上报情况',
              type: 'pie',
              radius: ['30%', '70%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 2,
                borderColor: '#fff',
                borderWidth: 1,
              },
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '12',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 142, name: '已上报', itemStyle: { color: '#00C851' } },
                { value: 14, name: '未上报', itemStyle: { color: '#FF4444' } },
              ],
            },
          ],
        }

        pieChart.setOption(pieOption)

        // 响应式处理
        window.addEventListener('resize', function () {
          pieChart.resize()
        })
      }

      // 跳转到分析结果页面
      function goToAnalysisResult(empId) {
        // 这里可以添加根据员工ID获取具体数据的逻辑
        console.log('跳转到员工分析结果页面:', empId)
        // 实际项目中这里会跳转到对应的分析结果页面
        alert('跳转到员工分析结果页面')
      }

      // 查看原始文件功能
      function viewOriginalFile(fileName) {
        // 这里可以添加查看文件的逻辑
        console.log('查看文件:', fileName)

        // 模拟文件查看功能
        const fileTypes = {
          pdf: 'PDF文档',
          jpg: '图片文件',
          png: '图片文件',
          docx: 'Word文档',
        }

        const extension = fileName.split('.').pop().toLowerCase()
        const fileType = fileTypes[extension] || '未知文件类型'

        alert(
          `正在打开文件: ${fileName}\n文件类型: ${fileType}\n\n在实际应用中，这里会打开文件查看器或下载文件。`
        )
      }

      // 下拉菜单函数
      function toggleDropdown(dropdownId) {
        const dropdown = document.getElementById(dropdownId)
        const trigger = dropdown.previousElementSibling

        // 关闭其他下拉菜单
        document.querySelectorAll('.dropdown-menu').forEach((menu) => {
          if (menu.id !== dropdownId) {
            menu.classList.remove('show')
            menu.previousElementSibling.classList.remove('active')
          }
        })

        // 切换当前下拉菜单
        dropdown.classList.toggle('show')
        trigger.classList.toggle('active')
      }

      function selectFilter(dropdownId, text, value) {
        const dropdown = document.getElementById(dropdownId)
        const trigger = dropdown.previousElementSibling
        const textElement = document.getElementById(dropdownId + 'Text')

        // 更新显示文本
        textElement.textContent = text

        // 更新选中状态
        dropdown.querySelectorAll('.dropdown-item').forEach((item) => {
          item.classList.remove('selected')
        })
        event.target.classList.add('selected')

        // 关闭下拉菜单
        dropdown.classList.remove('show')
        trigger.classList.remove('active')

        // 执行筛选逻辑
        filterEmployeeList()
        console.log('筛选条件:', dropdownId, value)
      }

      // 员工列表筛选函数
      function filterEmployeeList() {
        const departmentFilter = getCurrentFilterValue('monitorFilterText')
        const warningFilter = getCurrentFilterValue('warningFilterText')

        const employeeItems = document.querySelectorAll('.data-item')
        let visibleCount = 0

        employeeItems.forEach((item) => {
          const employeeInfo = item.querySelector('.employee-info').textContent
          const statusBadge = item.querySelector('.status-badge')
          const statusText = statusBadge ? statusBadge.textContent.trim() : ''

          let showItem = true

          // 部门筛选
          if (departmentFilter !== '全部部门') {
            const departmentMap = {
              风险管理部: '风险管理部',
              信贷管理部: '信贷管理部',
              运营管理部: '运营管理部',
            }
            const targetDept = departmentMap[departmentFilter]
            if (targetDept && !employeeInfo.includes(targetDept)) {
              showItem = false
            }
          }

          // 预警类型筛选
          if (warningFilter !== '全部预警类型') {
            const warningMap = {
              正常: '正常',
              一级预警: '一级预警',
              二级预警: '二级预警',
              三级预警: '三级预警',
            }
            const targetWarning = warningMap[warningFilter]
            if (targetWarning && statusText !== targetWarning) {
              showItem = false
            }
          }

          // 显示/隐藏员工项
          item.style.display = showItem ? 'block' : 'none'
          if (showItem) visibleCount++
        })

        // 更新员工列表标题
        const sectionTitle = document.querySelector('.section-title')
        if (sectionTitle) {
          sectionTitle.textContent = `员工列表(共${visibleCount}人)`
        }
      }

      // 获取当前筛选器值的辅助函数
      function getCurrentFilterValue(textElementId) {
        const textElement = document.getElementById(textElementId)
        return textElement ? textElement.textContent : ''
      }

      // 点击外部关闭下拉菜单
      document.addEventListener('click', function (event) {
        if (!event.target.closest('.dropdown-container')) {
          document.querySelectorAll('.dropdown-menu').forEach((menu) => {
            menu.classList.remove('show')
            menu.previousElementSibling.classList.remove('active')
          })
        }
      })
    </script>
  </body>
</html>
